 Divs, why are they so hard to use?, I can't seem to get anything right. |
  |
| kory |
 Feb 20 2012, 07:38 PM
Post
#1
|
|
Group: Members Posts: 3 Joined: 20-February 12 Member No.: 16,533  |
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
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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
Post
#3
|
|
Group: Members Posts: 3 Joined: 20-February 12 Member No.: 16,533 |
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
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Feb 20 2012, 09:28 PM
Post
#5
|
|
Group: Members Posts: 3 Joined: 20-February 12 Member No.: 16,533 |
[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
Post
#6
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 16th April 2024 - 03:03 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC