PDA

View Full Version : Divs and Floats - a newbie nightmare!!!


solid74
04-15-2010, 03:48 AM
Hello everyone,

I am a newbie at Dreamweaver and I've been trying to learn the correct way of doing things to build a solid base of understanding as I move forward. I have received great advice to my previous hurdles here on the forum and I am very appreciative for that. I now have a new problem to figure out and I am sure it will be crucial in understanding how pages are built properly in the future.

I have a page with a #container div holding the background image and a #maincontent div centered in the middle. In this #maincontent div I have a #body div and a #footer div, and within the #body div I have three window divs with my content. I want to have the first take up the width of the #body div and the other two side by side beneath the first one.

Sounds simple enough I'm sure. The problem is that when I try to insert the window divs without floats they stack on top of each other, and when I try to assign a float property, the #body div shrinks and leaves the window div outside it! I am pretty new to floats and clears so I tried assigning them to each window and just can't seem to figure it out.

My #container, #maincontent, and #body divs are all auto height, so it seems logical that the window divs within it will make the div around it fit everything. I just don't understand why the floating of the divs is messing everything up. And I can't get my third window div in the right place without floating somehow, right?

Here's my HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="_css/main.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColLiqCtr">
<div id="container">
<div class="oneColLiqCtr" id="header"></div>
<div class="oneColLiqCtr" id="navbackground">
<div class="oneColLiqCtr" id="navcontainer">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">SERVICES</a></li>
<li><a href="">WEBSITES</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
<div id="mainContent">
<div class="oneColLiqCtr" id="body">
<div class="oneColLiqCtr" id="mainwindow">Content for class "oneColLiqCtr" id "mainwindow" Goes Here</div>
<div class="oneColLiqCtr" id="bottomwindow">Content for class "oneColLiqCtr" id "bottomwindow" Goes Here</div>
<div class="oneColLiqCtr" id="cornerwindow">Content for class "oneColLiqCtr" id "cornerwindow" Goes Here</div>
</div>
<div class="oneColLiqCtr" id="footer">footer goes here</div>
</div>
</div>
<!-- end #container -->
</body>
</html>


...and my CSS

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColLiqCtr #container {
width: 100%;
text-align: left;
height: auto;
background-color: #666;
background-image: url(../_images/misc212.jpg);
background-repeat: repeat;
min-width: 800px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-bottom: 10px;
}
.oneColLiqCtr #header {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #FFF;
height: 125px;
background-image: url(../_images/header-background.png);
background-repeat: repeat-x;
text-align: center;
}
.oneColLiqCtr #navbackground {
background-color: #333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
.oneColLiqCtr #navcontainer {
height: 20px;
width: 800px;
margin-right: auto;
margin-left: auto;
}
.oneColLiqCtr #navcontainer ul {
list-style-type: none;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding-top: 1px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.oneColLiqCtr #navcontainer ul li {
display: inline;
margin: 0px;
}
.oneColLiqCtr #navcontainer ul li a {
text-decoration: none;
color: #FFF;
background-color: #333;
padding-right: 0px;
padding-left: 0px;
display: block;
float: left;
text-align: center;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFF;
border-left-color: #FFF;
width: 158px;
}
.oneColLiqCtr #navcontainer ul li a:hover
{
color: #000;
background-color: #fff;
}
.oneColLiqCtr #mainContent {
width: 800px;
padding-top: 0;
padding-bottom: 0px;
height: auto;
margin-left: auto;
margin-right: auto;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
background-color: #666;
}
.oneColLiqCtr #body {
height: auto;
border: 1px solid #000;
padding: 10px;
background-color: #FFF;
}
.oneColLiqCtr #mainwindow {
height: 400px;
width: 776px;
border: 1px solid #F00;
margin-bottom: 10px;
}
.oneColLiqCtr #bottomwindow {
height: 175px;
width: 480px;
border: 1px solid #F00;
padding: 5px;
margin-right: 10px;
}
.oneColLiqCtr #cornerwindow {
height: 175px;
width: 250px;
border: 1px solid #F00;
padding: 5px;
}

.oneColLiqCtr #footer {
height: 21px;
text-align: center;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFF;
color: #FFF;
font-weight: bold;
padding-top: 5px;
clear: both;
}



I bet it's something simple I am overlooking, or an error in my code that I don't recognize. I took a float tutorial but it didn't seem to have an example of what I am looking for. What I am trying to accomplish with the auto height on my #body div is being able to style following pages on the site according to content and not window size, so my pages height will depend on the amount of content. It seems like I should be able to float child divs within a parent div any way I want and the parent div will contain them if it has auto height? If anyone can see what I am doing wrong or can suggest a solution to my issue, I would be forever grateful!

Thanks!
Jayson

edbr
04-15-2010, 06:02 AM
float left in your child containers and make sure also in .oneColLiqCtr #mainwindow

Corrosive
04-15-2010, 07:35 AM
You don't need auto height by the way. Leave the height out all together and let content dictate the height.

DWcourse
04-15-2010, 02:11 PM
Floated divs do not affect the height of the divs that contain them so, as they expand, they will stretch beyond the bottom of their parent divs.

The solution is to add a clearing element (with the css clear property set to left, right or both as appropriate) before the close of the parent div.

DWcourse
04-15-2010, 02:16 PM
BTW, unless there is some particular CSS property in the oneColLiqCtr rule that you want to apply to all your divs, you don't need to apply that class to your divs.

By applying the oneColLiqCtr class to the body tag you can use it as part of the selector for any element within the body tag.

So .oneColLiqCtr #header will work for this:

<body class="oneColLiqCtr">
<div id="container">
<div id="header"></div>

solid74
04-15-2010, 10:43 PM
Thank you everyone for your advice!

Corrosive: I got rid of the auto height property on my divs and it seems to work the way I want to now. Kinda confusing, remove auto height to make the height automatically resize with content. Doesn't seem logical, but if it's one thing I've learned it's computers don't always follow logic lol.

DWC: That thing about parent divs not resizing to fit child divs was driving me crazy! The clearing element to floats was just confusing me. I set my child divs to float left and the parent body div to clear left, but it wasn't working. Seems like I tried every other combo as well lol. I was advised on another clearing element that seemed to work for me, adding overflow: hidden to the parent div. And, voila! It all works :)

Regarding the oneColLiqCtr rule, when I started using DW I just used the stock layouts, and this one was good for what I needed. Now that I know a little more, I realize I could have just applied a 100% width to my container div and auto margin for my maincontent div to get the same effect. I will be building from scratch from now on. I am just not understanding how the rule applies to the page. It's part of every rule I create but it only applies to the container div? Or the body tag? I understand what it does, just not sure where it is applied. Cound I just remove that from all of my rules and make .oneColLiqCtr #maincontent into .maincontent for example?

Thanks again for all of the help everyone!

Jayson