HTMLHelp Forums > Divs, why are they so hard to use?

kory

Feb 20 2012, 07:38 PM

Ok so what I am trying to do, is to make a layout where there are 3 columns that will resize appropriately in any size browser and that all have the same height/length, I am having problems getting this laid out because it seems like any time i try to adjust something, something else that is seemingly unrelated gets messed up.

such as right now the footer(div4) is on top of div1!?

I have no idea why this happened or how to fix it, is working with div's always this hard? anywhere I look for answers the pages are always with fixed sizes, I can't use that because I want people with smaller and larger monitors to see the same thing. Is there no good way to make everything resize?

sorry if this comes off whiny, but I am at my wits end with this. this is the third day in a row and still no forward progress because of this, and what really gets me is that it seems like it should be a simple fix, but nothing i look up on google or ask anyone about seems to help. if anyone has any GOOD rescources on this topic please let me know. god knows I could use all the help I can get.

here is my HTML and CSS

CODE

<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css">
   body{
   background-color: black;
   margin:0;
   padding:0;
   height:100%;
}

#container{
   min-height:100%;
   position:relative;
}

#div1{
   width: 100%;
   background-color: red;
   border-style:solid;
   padding: 10px;
}

#div2{
   background-color: blue;
   float:left;
   width: 32%;
   border-style:solid;
   word-wrap:break-word;
   padding-bottom:60px;
}

#div3{
   background-color: yellow;
   width: 32%;
   float:left;
   border-style:solid;
   word-wrap:break-word;
   padding-bottom:60px;
}

#test{
   background-color: green;
   width: 32%;
   float: left;
   border-style:solid;
   word-wrap:break-word;
   padding-bottom:60px;
}

#div4{
   width: 100%;
   background-color: purple;
   position: absolute;
   height:60px;
   bottom:0;
}

#div4 p{
   margin: 0;
   padding: 10px;
}

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

      <div id="div1">
         <p> kory</p>
      </div>
      <div id="bodyColumns">
           <div id="div2">
               <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
            </div>

            <div id="div3">
               <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
           </div>

          <div id="test">
               <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
               aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
           </div>

    </div>

     <div id="div4">
         <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p><br /><p>
              aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      </div>

</div>
</body>
</html>

pandy

Feb 20 2012, 07:51 PM

Don't position the footer. Just clear the floats and the footer will be right below them.
http://css-discuss.incutio.com/wiki/Clearing_Space

The footer is where it is now because floats doesn't take up any space, therefor BODY has no height. For the same reason you must use clear when the footer isn't positioned. Depending on where you place it it will force either BODY or #container (and with it BODY) to enclose the floats.

BTW DIVs aren't hard. CSS can be.

kory

Feb 20 2012, 08:20 PM

QUOTE(pandy @ Feb 20 2012, 07:51 PM)

Don't position the footer. Just clear the floats and the footer will be right below them.
http://css-discuss.incutio.com/wiki/Clearing_Space

The footer is where it is now because floats doesn't take up any space, therefor BODY has no height. For the same reason you must use clear when the footer isn't positioned. Depending on where you place it it will force either BODY or #container (and with it BODY) to enclose the floats.

BTW DIVs aren't hard. CSS can be.

see, I can't understand what is going on here...

I added option 1 to the container and that got the footer section at the bottom, but now it also wraps around the outside right edge of the third column and make a scroll-bar appear that when I scroll over the edge stops and then the black background continues..

also, I can't get the columns right. is there a way to tell them to all be the same size? or to re-size accordingly to the longest one?

sorry for all the questions.

pandy

Feb 20 2012, 09:19 PM

Try option 3 instead. It's easier to understand and works well. When you give an element the clear property you tell it to go to the first spot that is free of floats. Since the element with the clear is neither floated or positioned it does take up space and thus forces the containing element to enclose both the floats and the element with the clear property.

Look at this. The first case is basically what you have. You can see that the container isn't higher than footer and the float hangs out of it. The second example has a clearing div and that forces the container to enclose it.

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Clear</title>

<style type="text/css">

</style>

</head>

<body>

<div class="container">
<div class="floater"></div>
<div class="footer"></div>
</div>

<div class="container">
<div class="floater"></div>
<div class="clearit"></div>
<div class="footer"></div>
</div>

</body>
</html>

QUOTE

also, I can't get the columns right. is there a way to tell them to all be the same size? or to re-size accordingly to the longest one?

Basically no (but I'm lying a little). It isn't a table. The DIVs have no relationship to each other. You can however with CSS make them act like a table (with the display property, described at the second link below), but it's rather involved and lacks support in older browsers. The usual fix is to fake it.

http://www.alistapart.com/articles/fauxcolumns/
http://css-discuss.incutio.com/wiki/Any_Column_Longest

kory

Feb 20 2012, 09:28 PM

[quote name='pandy' date='Feb 20 2012, 09:19 PM' post='65911']
Try option 3 instead. It's easier to understand and works well. When you give an element the clear property you tell it to go to the first spot that is free of floats. Since the element with the clear is neither floated or positioned it does take up space and thus forces the containing element to enclose both the floats and the element with the clear property.
[/quote

Wow, that was actually amazing. thank you. this is the first time thqt I have felt like I kinda understand how the divs are connected.

[quote]
Basically no. It isn't a table. The DIVs has no relationship to eachother. You can, with CSS make them act like a table (with the display property, described at the second link below), but it's rather involved and lacks support in older browsers. The usual fix is to fake it.

http://www.alistapart.com/articles/fauxcolumns/
http://css-discuss.incutio.com/wiki/Any_Column_Longest
[/quote]

these were useful but I also found this link http://matthewjamestaylor.com/blog/equal-h...er-css-no-hacks thru one of the links you sent to me and it worked wonderfully. I can see how the containers fall into place now.

Thank you so much for the help.

-kory

pandy

Feb 21 2012, 09:20 AM

Hey, I messed up when I pasted the HTML. .clearit should be before .footer. I changed that above. Sorry.

Alternatively you can place both .clearit and .footer after the container (in that order). .container won't expand but the footer will still go free of the float. Matter of taste.