Jump to content

[SOLVED] new to CSS - question regarding positioning

lonewolf217

By lonewolf217
in CSS Help

 Share

Recommended Posts

lonewolf217 Member

lonewolf217

Posted
Posted

I am very new to CSS and trying to learn my way around. I have a simple layout of a banner and 3 columns under it but I cannot figure out a couple things.

 

Here is my CSS

#banner {
height: 50px;
border: 1px solid #000;
background:#fff;
z-index:-1;
}

#leftcontent {
position: absolute;
left:10px;
top: 50px;
width:200px;
background:#fff;
border: 1px solid #000;
}

#centercontent {
top: 50px;
background:#fff;
margin-left: 199px;
margin-right: 199px;
border: 1px solid #000;
}

#rightcontent {
position: fixed;
right: 10px;
top: 50px;
width: 200px;
background: #fff;
border: 1px solid #000;
}

 

and my simple page

<html>
<head>
	<link rel="stylesheet" type="text/css" href="format.css" />
</head>
<body>	
<div id="banner">Text</div>
<div id="leftcontent">Text</div>
<div id="centercontent">
	Text
</div>
<div id="rightcontent">Text</div>
</body>
</html>

 

2 things I cannot figure out:

1) #leftcontent and #rightcontent are floating above the banner. the banner height is 50px and the top margin on the left and right is 50px, so I cannot figure out why they are overlapping

2) the #centercontent is properly aligned with the banner, however it seems their borders are "merged" creating a doublethick line.  How do I clean this up?

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

I was bored so I coded the whole thing for you. The problem with your code was the use of absolute positioning. It is a no-no. Feel free to use/modify the attached code I provided. If you choose not to use it, at least look at the underlying code to see how I did it without using absolute positioning. I will send the bill in the mail. hehe.  :D (just kidding).

 

NOTE: The formating of the whitespace got screwed up when I copied and pasted. Sorry.

 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<style type="text/css">
  			@import url("test.css");
	</style>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>Title of Page</title>

</head>

<body>

<!-- Html Page Div -->
<div id="html_page">

<!-- Header -->

<div id="header">

<div class="banner">
	<p>Banner</p>
</div>

</div>

<!-- Body -->

<div id="body">

<div class="left_column">
	<p>Left Column</p>
</div>


<div class="main_column">
	<p>Main Column</p>
</div>


<div class="right_column">
	<p>Right Column</p>
</div>

</div>


<!-- Footer -->

<div id="footer">
<p>Copyright 2008 Greg Solak</p>
</div>

</div>
<!-- End of Html Page Div -->

</body>
</html>

 

test.css

/* Css for the Homepage - Copyright ProfileTwist.com */

body{margin: 10px auto 30px 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

* {margin: 0;padding:0}

/* Layout Div */

#html_page {margin: auto; width: 1000px;}

.clear {clear: both; height: 0px;}

#html_page {
width: 1000px;
border: 1px solid #000;
}

#header .banner {
height: 50px;
border: 2px solid #ccc;
}

#body .left_column {
width: 200px;
float: left;
background: #ababab;
height: 500px;
}
#body .main_column {
width: 600px;
float: left;
background: #efefef;
height: 500px;
}
#body .right_column {
width: 200px;
float: left;
background: #ababab;
height: 500px;
}

#footer {
padding: 15px 0 5px 0;
text-align: center;
font-weight: bold;
}

Link to comment
Share on other sites
lonewolf217 Member

lonewolf217

Posted
  • Author
Posted

I am trying to get it so that the left and right columns are fixed at 200px and the center column auto-sizes in between.  I dont think this will handle that condition

 

#body .main_column {
width: 600px;
float: left;
background: #efefef;
height: 500px;
}

 

since you have a fixed width for the main column

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

Sorry about that! Here's the revised code:

 

html:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<style type="text/css">
  			@import url("test.css");
	</style>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>Title of Page</title>

</head>

<body>

<!-- Html Page Div -->
<div id="html_page">

<!-- Header -->

<div id="header">

<div class="banner">
	<p>Banner</p>
</div>

</div>

<!-- Body -->

<div id="body">

<div class="left_column">
	<p>Left Column</p>
</div>


<div class="right_column">
	<p>Right Column</p>
</div>

<div class="main_column">
	<p>Main Column</p>
</div>

</div>


<!-- Footer -->

<div id="footer">
<p>Copyright 2008 Greg Solak</p>
</div>

</div>
<!-- End of Html Page Div -->

</body>
</html>

 

test.css

/* Css for the Homepage - Copyright ProfileTwist.com */

body{margin: 10px auto 30px 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}

a {text-decoration: none;}
a:hover {text-decoration: underline;}

* {margin: 0;padding:0}

/* Layout Div */

#html_page {margin: auto; width: 90%; }

.clear {clear: both; height: 0px;}

#html_page {
border: 1px solid #000;
}

#header .banner {
height: 50px;
border: 2px solid #ccc;
}

#body {

}

#body .left_column {
width: 200px;
float: left;
background: #ababab;
}
#body .main_column {
margin: 0 200px 0 200px;
background: #efefef;
}
#body .right_column {
width: 200px;
float: right;
background: #ababab;

}

#footer {
padding: 15px 0 5px 0;
text-align: center;
font-weight: bold;
}

Link to comment
Share on other sites
lonewolf217 Member

lonewolf217

Posted
  • Author
Posted

it is behaving wierd in firefox.  when I add content to the left and right columns, it will overflow onto the footer.  if i add content to the middle column it will push the footer down.

 

but it seems to work properly in IE .. go figure ?

 

How would I get it so that the footer would align itself after the entire Body div ends ?

Link to comment
Share on other sites
TheFilmGod Advanced Member

TheFilmGod

Posted
Posted

you need to clear the floated divs. Add "<div class="clear"></div>" after the three main column divs. This should fix the issue.

 

Some other css gurus might come on and yell at me for using this clearing method. If you are interested to do it the "better" way search clearfix on google. I use the old fashion clearing way as it's consistent and enables me to clear everything from divs to images...

 

- Hope that helps!  ;D

Link to comment
Share on other sites
bronzemonkey Member

bronzemonkey

Posted
Posted

Some other css gurus might come on and yell at me for using this clearing method. If you are interested to do it the "better" way search clearfix on google. I use the old fashion clearing way as it's consistent and enables me to clear everything from divs to images...

 

The better clearing methods not only do all that, but avoid you having to go into the markup to clear.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.