Help - Search - Members - Calendar
Full Version: Divs, why are they so hard to use?
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
kory
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
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. wink.gif
kory
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. wink.gif



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
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">
<!--
.container   { border: 2px solid red;
               background: green;
                   margin-bottom: 200px }
                  
.floater     { width: 150px; height: 200px;
               background: yellow;
                    float: left }
.footer      { height: 100px;
               background: pink }

.clearit     { clear: left }


-->
</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
[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
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.