Question

So I’m building a page that will be used by multiple companies, but I’m having some issues. In the first example, with the code for just the two divs, looks fine, but I’d like some space between each row. I’ve also posted the css below. Then in the second link, I’ve pasted the code with a layout of one of the companies that will use the code. It looks better but it pushes the sidebar down.

http://tinyurl.com/bo6ukqe

http://tinyurl.com/cerzfwd

So I’m curious what’s the best way to fix this. I need the left div and right div to line up. Currently

1. I want the left and right div to line up. Meaning, both are the same height.
2. I’d like if there’s a little bit of space between each row. Currently, the pictures are right on top of each other.
3. I’d like the right div’s size to depend on how much room it has. So instead of one company having to have it at 55% because of a sidebar, then another company has to change it to 80% because it doesn’t have a sidebar.

Here’s the css if you prefer no to dig through the code in the above links:

<style type="text/css">
.body { border : 1pt solid black; }
.left { clear: left; float : left; width:226px; height:127px;  }
.right { float : right; width : 80%; }
.spacer { clear : both; height: 10px; }
img { border: none; }
p.description {
line-height:18px;
color:#767676;
font-size:12px;
}
p.description a {
font-weight:bold;
}
a.read-more-link {
border-top:none;
text-transform: uppercase;
margin:0; padding:0;
font-size:10px;
}
.read-more a {
border-top:none;
display: block;
text-align: right;
text-transform: uppercase;
margin:15px 0 0 0; padding:0;
text-decoration: none;

}

</style>

Answer 1

For #1 and #2:

Put a wrapper div around each row. Since you are floating the child elements that wrapper will also need to be floated in order for it to respect inner heights so that your margins will push a sibling:

<div style="float: left; width: 100%; clear: both; margin: 0 0 10px 0;"></div><!-- wrapper row -->

For #3:

You will need to learn responsive web design.