2 column layout

**readysteady** · Sep 2, 2007, 13:40

hi,
I'm having a bit of trouble with my first site in css. i cant seem to align the content side by in the main section. This section uses Horizontal scrolling, which is causing some probs- if i switch to absolute positioning the scroll bar goes through the header and if i use relative i get 2 scroll bars. i would really appreciate any help or pointers?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>3 col layout with equalising columns and footer</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {height:100%}
body {
padding:0;
margin:0;
background:000000;
color: #000000;
font family: courier;
font size: 8px;
}
#outer{
height:100%;
min-height:100%;
margin-left:216px;
background:#ffffff;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}

html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#ffffff;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
color: #000000;

}

#contentcontainer{
position:relative;
top:0px;
margin-left:0px;
margin-top:0px;
width:100%;
height:500px;
background:#ffffff;
border-top:none;
border-bottom:1px solid #000;
overflow:scroll;
float:right;
color: #000000;
padding-left:0px;
}
/* divs for main content-------------------------------*/
#threediv1{
position:relative;
top:0px;
left:0px;
width:100%;
height:405px;
background:#ffffff;
border-top:none;
overflow:hidden;
color: #000000;

}

#threediv2{
position:relative;
top:0px;
left:740px;
width:100%;
height:405px;
background:#ffffff;
border-top:none;
overflow:hidden;
float:right;
color: #000000;
align:top
}

/*end of divs for main content------------------------------*/

#topnavcontainer{
position:relative;
top:10px;
left:220px;
width:100%;
height:90px;
background:#ffffff;
border-top:none;
overflow:hidden;
color: #000000;
}

#topnavcontainer1{
position:absolute;
top:40px;
left:220px;
width:100%;
height:90px;
background:#ffffff;
border-top:none;
border-bottom:none;
overflow:hidden;
color: #000000;
}
/* special */
* { padding: 0em; margin: 0em; }
/* ----------------------------- start #topnav ----------------------------- */
#topnav {position:absolute;}
#topnav img { border: 0px;}
#topnav li { display: inline; list-style:none; }
#topnav li a { float: left; display:block; width: 180px; height: 16px; margin: 0%;}
#topnav li a img { border:none; vertical-align:bottom; /* for IE6 */}
#topnav li a:hover { visibility:visible; }
#topnav li a:hover img { visibility:visible; }
#topnav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
/* ----------------------------- end #topnav ----------------------------- */

/* ----------------------------- start #topnav ids ----------------------------- */
#one { background:url(img/top_nav/menu_seehear_02.gif) no-repeat left bottom; }
#two { background:url(img/top_nav/menu_profile_02.gif) no-repeat left bottom; }
#three { background:url(img/top_nav/menu_contact_02.gif) no-repeat left bottom; }
#four { background:url(img/top_nav/menu_clients_02.gif) no-repeat left bottom; }
#five { background:url(img/top_nav/menu_resonate_02.gif) no-repeat left bottom; }
#six { background:url(img/top_nav/menu_friends_02.gif) no-repeat left bottom; }

/* ----------------------------- end #nav ids ----------------------------- */

.logo{
position:absolute;
top:3px;
left:25px;
}

#left {
position:relative;/*ie needs this to show float */
width:160px;
float:left;
border-left:0px solid #000;
margin-left:-159px;/*must be 1px less than width otherwise won't push footer down */
padding-top:82px;/*needed to make room for header*/
}
#left p {padding-left:3px;padding-right:2px}

#left a{
font-family: Courier New, Courier, monospace;
font-size: 12px;
color: #666666;
text-decoration:none;
}

#left ul {
list-style: none;
text-decoration:none;
margin: 10px;
padding: 0px;
}

#left li {
border-bottom: 0px solid #ED9F9F;
font-weight:none;
text-decoration:none;
}

#left li :hover
{

font-weight:none;
text-decoration:none;
/* border-color:blue;*/
background-color:#0000ff;
color:#000000;

}

#left li:active
{

font-weight:none;
text-decoration:none;
background-color:#0000ff;
color:000000;
}

#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FFFFFF;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
div,p {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */

</style></head><body>
<div id="outer">

<div id="left">
<ul>
<li><a href="index.htm">Sketch</a></li>
<li><a href="#">Fiat</a></li>
<li><a href="#">Shelter</a></li>
<li><a href="#">Stiff Records</a></li>
<li><a href="#">3 Mobile</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">Simple Records</a></li>
<li><a href="#">One&Only Resorts</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">Adidas</a></li>
<li><a href="#">Ogilvy</a></li>
<li><a href="#">BBC</a></li>
<li><a href="#">Kaupthing</a></li>
<li><a href="#">Cobra</a></li>
<li><a href="#">Havana Club</a></li><br></br>
<li><a href="#">Audio-visual<br>performance</a></br></li>
</ul>

</div>
<div id="clearheader"></div> 

<div id="centrecontent">
<div id="contentcontainer">
<div id="threediv1">
<img src="img/three/1.jpg">
</div>
<div id="threediv2">
<img src="img/three/2.jpg">
</div>
</div>
<div id="clearfooter"></div> 
</div>

<div id="footer">Footer - | <a href="http://www.pmob.co.uk/temp/2colfixedtest_3.htm">Left column longest</a>
| <a href="http://www.pmob.co.uk/temp/2colfixedtest_2.htm">Centre column longest</a> | <a href="http://www.pmob.co.uk/temp/2colfixedtest_4.htm">No
Column Longest</a> | - Footer
<p></p>

</div>
<div id="header">
<div class="logo">
<img src="img/top_nav/logo_silentstudios.gif" width="191" height="23">
</div>

<div id="topnav">
<div id="topnavcontainer">
<ul><li>
<a title="" href="#" id="one">
<img src="img/top_nav/menu_seehear_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="two">
<img src="img/top_nav/menu_profile_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="three">
<img src="img/top_nav/menu_contact_01.gif" alt=""></a>
</li>
</div>
<div id="topnavcontainer1">
<li>
<a title="" href="#" id="four">
<img src="img/top_nav/menu_clients_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="five">
<img src="img/top_nav/menu_resonate_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="six">
<img src="img/top_nav/menu_friends_01.gif" alt=""></a>
</li>
</ul>
</div>

</div>

</div>

</body></html>

**Dan Schulz** · Sep 2, 2007, 13:57

You don't think you could post a live link to your page so I can see the images, do you?

**readysteady** · Sep 2, 2007, 14:22

hey dan,
nice one for getting back to me.
its a bit all over the place due to the angel fire me thinks with all the banners etc.

http://readysteadyeddy07.angelfire.com/

**Dan Schulz** · Sep 2, 2007, 14:42

try using www.awardspace.com (no banners or other ads - and it's free)

I'll get back to you in a few minutes. Making a late lunch right now.

**markbrown4** · Sep 2, 2007, 15:00

Dan will help you with the code for the layout - I'll give you the basics.
You can either float both columns ( 2 floated elements will stack against each other if the combined widths of the element don't exceed 100% ).

Or you can float 1 column and leave the other in the normal flow with a margin equal to the width of the column. In this case the float needs to be first in the html.

I think your clearheader div is doing what you would expect and clearing the left column. This could be why the columns aren't side by side.

**Dan Schulz** · Sep 2, 2007, 15:48

Oh, I'm going to do more than that.

**markbrown4** · Sep 2, 2007, 16:59

Off Topic:

I'm just buzzing with anticipation

**readysteady** · Sep 2, 2007, 17:03

s

**Dan Schulz** · Sep 2, 2007, 17:30

If you don't mind me asking, what font did you use for the top link images?

**readysteady** · Sep 2, 2007, 17:37

DevinneBt roman

**Dan Schulz** · Sep 2, 2007, 17:44

Ah crud. A non-standard font then. Ok, this is going to take a bit longer than I thought.

**readysteady** · Sep 2, 2007, 18:00

i don't even have the font,i was giving the images already cut up in .jpg

**Dan Schulz** · Sep 2, 2007, 19:13

Do you HAVE to use that font, or would you mind if I used plain text for now and then linked you to an image substitution technique?

**readysteady** · Sep 2, 2007, 19:34

ok dan,

we'll try it that way

**Dan Schulz** · Sep 2, 2007, 21:00

Hmm... this is unusual. I can't seem to recreate your sliding content area without having it break the layout in Opera.

**markbrown4** · Sep 2, 2007, 21:21

How about this?

Code:

#contentcontainer{
	margin-left:-1px;
}

**Paul O'B** · Sep 3, 2007, 13:51

Hi,

This is about the best I could come up with in the short time I had.

http://www.pmob.co.uk/temp/sideways-scroll3.htm
http://www.pmob.co.uk/temp/sideways-scroll2.htm
http://www.pmob.co.uk/temp/sideways-scroll.htm
http://www.pmob.co.uk/temp/2col-nofloatdrop2scroll.htm

All have their problems but no worse than the frames site you linked to.

The SitePoint Forums have moved.

User Tag List

Thread: 2 column layout

Thread Tools

Display

2 column layout

Bookmarks

Bookmarks

Posting Permissions