Column Troubles

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

alexroussin

Hello,
I am building a site with columns and I cannot get them to work right. Here is my html document:

<body>

<div id="bodycontent">
<div id="column1">
<p class="columnhead1">Column 1</p>
<p class="columnhead2">Column 2</p>
<p class="columnhead3">Column 3</p>
</div>

</body>

Here is my style sheet:

body {
background-color: #99BADD;
}

#bodycontent {
margin: 10%;
background-color: white;
}

#bodycontent {
padding-top: 3%;
padding-right: 4%;
padding-left: 4%;
font-size: 100%;
}

#bodycontent {
background-color: white;
border: 2px solid white;
border-radius: 10px;
margin-top: 2%;
margin-bottom: 0;
}

.columnhead1 {
width: 32%;
margin-right: 2%;
border-bottom: 2px solid black;
float: left;
}

.columnhead2 {
width: 32%;
margin-right: 2%;
border-bottom: 2px solid black;
float: left;
}

.columnhead3 {
width: 32%;
border-bottom: 2px solid black;

}

When I add "float: left" to ".columnhead3", It puts all of the columns on the same line but moves them out of the white area. I need to know how to keep the columns on the same line, while keeping them in the white area.

Thanks in Advance,

Alex

rtrethewey

Your CSS settings for your columns exceed 100%. The document space occupied by an element is the sum of the width, the margin, and the border - both horizontally and vertically. So you currently have 3 * (32% + 2% + 2px) which is 102% + 6px. Reduce the width settings to 29% or so.

alexroussin

I changed the width of each column to 29% and it didn't fix the problem. Thanks for the help anyways. Also, it may not be working because I might have another error.

Thank You,
Alex

rtofvnt

I think you've got whole structure bit wrong. Look:

<div class="container">
   <div class="column">
     <p class="header"> header 1 </p>
   </div>

<div class="column">
     <p class="header"> header 2 </p>
   </div>

<div class="column">
     <p class="header"> header 3 </p>
   </div>
<div class="clear"></div>

</div>

So .. in css you have to have:

.container {width: ...whatever you want }
.column {float: left; width: 33%; }
.clear { clear: both; }

I'm not 1000% sure about 33% - experiment a bit.

Templates

polyglot

Could you please provide the page URL? It is so much easier to evaluate the problem that way.