Column Troubles

**alexroussin** · 08-11-2012 07:57 PM

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

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<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** · 08-11-2012 09:59 PM

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** · 08-16-2012 08:09 AM

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** · 08-21-2012 08:22 AM

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

Code:

<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** · 08-21-2012 10:39 AM

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

JP

Thread: Column Troubles

Thread Tools

Display

Column Troubles

Still Not Fixed

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions