I am making a 2-column layout; I am having some troubles with header.

Discussion in 'CSS' started by jester602, Jun 25, 2008.

0
  1. #1
    Right now, I am making a website and all <b>was</b> going smoothly! <b>Until</b> I realized my old layout didn't have a footer that would stick to the bottom, because everything was absolute positioned! So, I decided to redesign with a 2 column CSS based, container layout. But, when I was making this layout I didn't want for it to be a fixed width after I thought it out, so I decided to try to remove it! When I removed it, the header went crazy (the footer followed too!); the header and footer went past of the page making a scrollbar appear at bottom. How do I fix this? CSS + Layout skeleton is below, plus some live links to help.

    <style type="text/css">
body,html{
	margin: 0;
	padding: 0;
	color: #999999;
	font-family: Arial, default;
	font-size: 85%;
	background-color: #FBFBFB;
	}

body{
	min-width: 750px;
	}

#container{
	background: #FBFBFB;
	margin: 0 auto;
	width: 750px;
	}
	
#header{
	width: 100%;
	height: 100px;
	background: url(/images/header.png) repeat-x;
	}
	
#navigation{
	background: #FBFBFB;
	padding: 5px;
	}


#content{
	float: right;
	width: 500px;
	}

#content{
	padding: 0 10px;
	}
	
#sidebar{
	float: left;
	width: 240px;
	background: #FBFBFB;
	}
	
#footer{
	padding: 5px;
	margin: 0;
	clear: both;
	width: 100%;
	height: 100px;
	background: url(/images/footer.png) repeat-x;
	}
</style>
<body>
<div id="container">
	<div id="header">
	<img src="/images/sun.png" alt="tartio sun" />
	<img src="/images/cloud1.png" alt="the first cloud" />
	<img src="/images/cloud2.png" alt="the second cloud" />
	<img src="/images/cloud3.png" alt="the last cloud" />
	</div>
	<div id="content">
	This is the content.
	</div>
	<div id="sidebar">
	This is the sidebar.
	</div>
	<div id="navigation">
	This is the navigation.
	</div>
	<div id="footer">
	This is the footer.
	</div>
</div>
</body>

</html>
    Code (markup):
    Fixed width.
    Width taken out.

    I would appreciate help, thank you!
     
    jester602, Jun 25, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Simple - don't use absolute positioning on flow elements. With that much absolute positioning I'd throw it out and start over from scratch IN FLOW.
     
    deathshadow, Jun 26, 2008 IP
  3. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm assuming your trying to achieve a 2-column fluid layout. Fluid layouts are relatively harder to code compared to fixed width layouts.If you have limited css knowledge, it would be best to use an existing code and use that as a template.

    I hope this would help:
    http://css-tricks.com/examples/PerfectFluidWidthLayout/
     
    glorie, Jun 27, 2008 IP