I’ve looked for this in the search and can’t find an answer, either that or I didn’t understand it, it’s probably a rookie mistake but I’m just not seeing it. Basically I’ve got two columns of divs side by side and there is a decent gap between the two… in addition to that they won’t line up. I had them next to each other before but messed it up. I can’t even begin to imagine what the problem is so heres some code (i will be making a style sheet, so don’t freak out, and I know it needs a bit more organization. Thanks in advance.
<style type="text/css">
.body_titles {
padding: 20px;
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
width:640px;
}
.body_content {
padding: 20px;
font-family: GeosansLight;
font-size: 16px;
color: #333;
text-decoration: none;
overflow:hidden;
width:640px;
}
#column_left_container {
float:left;
width:640px;
}
#content_tab_top_left {
background-image:url(../img/container_top.jpg);
background-repeat:no-repeat;
height:335px;
width:640px;
}
#content_tab_center_left {
background-image:url(../img/container_center.jpg);
background-repeat:no-repeat;
height:311px;
width:640px;
}
#content_tab_bottom_left {
background-image:url(../img/container_btm.jpg);
background-repeat:no-repeat;
height:300px;
width:640px;
}
#padding_div1 {
padding:2px;
width:640;
}
#column_right_container {
float:right;
width:300px;
}
.body_titlesRIGHT {
padding: 20px;
font-family: GeosansLight;
font-size: 18px;
color: #FFF;
text-decoration: none;
width:300px;
}
.body_contentRIGHT {
padding: 20px;
font-family: GeosansLight;
font-size: 16px;
color: #333;
text-decoration: none;
overflow:hidden;
width:300px;
}
#content_tab_top_right {
background-image:url(../img/container_top.jpg);
background-repeat:no-repeat;
height:335px;
width:300px;
}
#content_tab_center_right {
background-image:url(../img/container_center.jpg);
background-repeat:no-repeat;
width:300px;
}
#content_tab_bottom_right {
background-image:url(../img/container_btm.jpg);
background-repeat:no-repeat;
width:300px;
}
#padding_div2 {
padding:2px;
width:300px;
}
</style>
<div id="body_container">
<div id="columnn_left_container" style="display:inline-block">
<div id="content_tab_top_left">
<div class="body_titles">
Title
</div>
<div class="body_content">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
<br />
</div>
</div>
</div>
<div id="content_tab_center_left">
<div id="padding_div1"></div>
<div class="body_titles">
Title
</div>
<div class="body_content">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
</div>
</div>
<div id="content_tab_bottom_left">
<div class="body_titles">
Title
</div>
<div class="body_content">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
</div>
</div>
</div>
<div id="column_right_container" style="display:inline-block">
<div id="content_tab_top_right">
<div class="body_titlesRIGHT">
Title
</div>
<div class="body_contentRIGHT">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
<br />
</div>
</div>
<div id="content_tab_center_right">
<div id="padding_div2"></div>
<div class="body_titlesRIGHT">
Title
</div>
<div class="body_contentRIGHT">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
<br />
<br />
</div>
<div id="content_tab_bottom_right">
<div class="body_titlesRIGHT">
Title
</div>
<div class="body_contentRIGHT">
Content
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Tests<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
</div>
</div>
</div>
</div>
</div>
First, your
has nn in the column part
Change that to