Question: Extending the background of a div container [Archive]

Click to See Complete Forum and Search --> : Question: Extending the background of a div container

jasonchan

09-03-2006, 05:26 AM

Let me start by stating that I am new in web development and currently just browsing online for examples. I recently stumbled upon a 2 column layout design. Below is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head><title>Example</title>

<style type="text/css">
@import "all.css";

body {
margin:0px 0px 0px 0px;
}

#leftcontent {
float:left;
width:300px;
background:brown;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:10px;
padding-left: 30px;
padding-bottom:15px;
}

#rightcontent {
}

p,h1, {
margin:0px 30px 10px 30px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#rightcontent p {
font-size:10px;
margin-left:0 px;
}

</style>
</head>

<body>

<div id="leftcontent">
<h1><a href="home.html">HOME</a></h1>
<h1><a href="menu.html">MENU</a></h1>
<h1><a href="contact.html">CONTACT</a></h1>
<h1><a href="order.html">ORDER</a></h1>
<h1><a href="about.html">ABOUT</a></h1>
</div>

<div id="rightcontent">
<h1>Welcome</h1>

</div>

</body>
</html>

My question is ... how do i extend the vertical background color (brown) all the way down, continously in some sense, for the div id "leftcontent" and right content.

Also when i adjust the browser window, horizontally, the div id="right content" falls under the div id="left content". How do you fix this error? I know that you will have to edit some information in the CSS of #rightcontent but what exactly would i need to do?

Again, thanks for your kind responses

jasonchan

09-03-2006, 05:34 AM

for the CSS file, using a book as a reference, i used:

#rightcontent {
margin: 0px 0px 0px 340px;
}

340= 300 px for the width of the #leftcontent + 30 px for the padding-left + 10px for the margin-right.

Is this the correct way to solve this problem?

Also for the properties in the left content:
#leftcontent {
float:left;
width:300px;
background:brown;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:10px;
padding-left: 30px;
padding-bottom:15px;
}

If margin-left, margin-bottom, margin top or padding right & padding-bottom is not defined, then they do not exist? they are both equal to 0 then??

chris_bcn

09-03-2006, 05:38 AM

Look here

http://alistapart.com/articles/fauxcolumns/

09-03-2006, 05:40 AM

there is no such thing as "the correct way to solve the problem." with css, there are numerous ways to tackle any given problem. giving that right div a left margin wide enough to accomodate the left float sounds good. Or you could float the right div. Etc. Etc.

the margin thing, long story short basically just consider it a zero value.

jasonchan

09-03-2006, 05:59 AM

Thanks for the website Chris but I am still having trouble applyin it to this html. The website shows an example by setting properties in the body section. I am trying to set this up in the div container, and it doesnt work for some reason. any suggestions>?

09-03-2006, 06:48 AM

Easy answer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Floated column example</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}

#wrapper {
border: thin solid black;
width: 700px;
padding: 0;
margin: 0;
}

#navigation {
float: left;
width: 300px;
background-color: red;
}

#navigation ul li {
list-style-type: none;
}
#content {
margin-left: 300px;
background-color: blue;
}

#content h1 {
padding: 0;
margin: 0;
}

#clear {
clear: both;
}
</style>

</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="order.html">ORDER</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div> 
<div id="content">
<h1>Welcome<h1>
</div> 
<div id="clear">
</div> 
</div> 
</body>
</html>

There are a couple of things I did, the first was change your navigation to a list so it is semantic. When making a navigation bar it is best to use the list element not pargraphs or heading tags.

The next thing I did was change your doctype which I don't think affects final output, I just like xhtml strict as it forces me to mark-up more precise/without error.

The next thing I did was drop your list into a div container that defines it. That is the navigation container. Second, I defined the right container as something more semantic, hence, the content div.

So now you have two divisions your navigation division and content division. After that I wrapped both in a container div and floated the navigation division left.

Now, this is something that you need to understand when using floats. In order for a division such as the wrapper to reconize the float you need to either add a clearing element or float division wrapper as well. When things are floated they take up no space therefore, the container division does not reconize. In order to *hack* this you add either a empty clearing element or float the container as well. I choose to add a clearing element but, you could easily float the wrapper as well.

Now, about the columns. The columns are tough thing to explain. Unless, you use images that are positioned absolutly its not possible to create even columns for both divisons to easily. personally, I find javascript to be the best way to do this but, otherwise, I j=suggest looking into fuax columns by Dan Cederholm. That method uses images to create an "illusion" of full length coulms.

Hope that helps.