FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS nested divs





riv_
I'm using some nested divs to create a fluid layout with some large boxes sort of random-ishly spaced about my page.
I've got everything positioned in a way I'm quite happy with, but am having a problem with the nesting, and have been at this for long enough that I'm not thinking straight anymore. (We had a power outage when I was almost finished LAST night... wiped out my CSS... groan!)
Anyways, it seems each browser has a different idea of which div is being ended when, so I'm having a hard time getting all of my blocks to clear the container/background...
I'm sure this is an obvious one, but I need help.
Any suggestions would be appreciated...
Thanks!
tingkagol
I'm also interested in using div's maneuverability. I hope someone will post a good tutorial page for divs. It seems all I could find in google is not what I want.
pudovkin
I don't believe very much in liquid layout.
Since monitors are not liquid and there's not a vast variety of monitor sizes (up to Cool, I still believe in good layout in fixed sizes.

But, what the hell, let's give LL a try. Smile
Columns are always a problem when going for tableless.
Last winter I was working in a website with three columns, all of them liquid.
33, 67 and 33 percent wide each.
First, the browsers don't understand very well the sum of this percentages to be 100. So, go for 98%. Try to sum your columns and make them all be 98% wide in total.
And there's a tip about a "gutter". Is the fourth column, that makes everything work.

This is the best example I saw about this issue.
Hope to helped you with something.
Marston
pudovkin wrote:
I don't believe very much in liquid layout.
Since monitors are not liquid and there's not a vast variety of monitor sizes (up to Cool, I still believe in good layout in fixed sizes.

But, what the hell, let's give LL a try. Smile
Columns are always a problem when going for tableless.
Last winter I was working in a website with three columns, all of them liquid.
33, 67 and 33 percent wide each.
First, the browsers don't understand very well the sum of this percentages to be 100. So, go for 98%. Try to sum your columns and make them all be 98% wide in total.
And there's a tip about a "gutter". Is the fourth column, that makes everything work.

This is the best example I saw about this issue.
Hope to helped you with something.
Buddy... 66 (33*2) + 67 does NOT equal 100%...
pudovkin
Ooops! SORRY!
33, 33, 34!
riv_
I think I've got most of the positioning figured out:
I've floated the first few divs, then nested a few and used position:relative
to get them exactly where I want them.
Actually, I'm pretty happy with that part (I prefer liquid layout... I used to just absolutely position everything, but then I looked at one of my pages on someone elses machine... that was a real wake up call for me!)
Anyways, I still can't get the footer to clear the last div. It's at the bottom, but overlaps the image at the bototm of the last div. I'm sure it's a simple thing to clear it, but I haven't figured it out yet.
I'll put it up later this afternoon and post the link, so you can see what I'm talking about, if that helps.
riv_
pudovkin
Try tables... hehehehe Smile
riv_
It's at riverweb@frih.net for now. SOrry about the delay (my son has been very ill)
Anyways, as you can see, it's in progress (Colors are temporary, font size hasn't been set, content is incomplete etc). What I'm really stumped on is the blinking footer... I can't position it in IE (It looks OK (not perfect though) in FF and OPera... haven't checked the others yet). THe main body of the CSS looks like this:
Code:
#wrapper {  width: 100%;
             background-color: #660000;
           font-family: sans-serif, courier, times new roman;
            }
#container {
    width: 86%;
    margin: 7%;
    background-color: #990033;
}

#ice { float: left;
      margin-left: 1%;
      margin-right:3%;
      margin-top: 4%;
      display:block;

}

#p1 { float: left;
       background-color: #B2B59C;
      padding: 2% 5%;
      width: 50%;
      z-index: 100;
      margin-top: 2%;

}

#p2 {  display: block;
      position: relative;
      background-color: #F9F6C8;
       border: 3px outset #ACB48B;
       left: 10%;
       top: 2%;
       width: 120%;
       padding: 3%;
       z-index: 800;
}

#here {

      float: left;
    background-color: #E5DAB9;
    border: 3px outset #FCFCE4;
    width: 30%;
    padding: 3%;
    margin: -10% 2%;
    z-index: 500;
}

#here img.lupine{
    margin-left: 5%;

}

#drum {
      float:left;
      margin: 5%;
      padding: 3%;
      width: 30%;
}
#clear {
    background-color: #893D50;
    float: left;
}

#footer {
    float: left;
    width: 100%;
    background-color: #F7E9E1;
}


Any thoughts, suggestions, comments?
riv_
pudovkin...
that's not even funny! Confused
pudovkin
HAHAHAHA
A few months ago, I've struggled around the 3-column all-elastic layout.
Damn, it was hard. So, since then, I always suggest people to use a table for cases like that... Smile

Well... About your problem: I can't figure out (perhaps because my english is not very good) what you want. Could you provide us a picture of the desired layout?
riv_
If you follow the link http://www.riverweb@frih.net , you'll see.
The only layou issue I want to change right now, is that the footer at the bootom of the page should be at the very bottom of the page. In IE, it is displaying about halfway over the middle of the last image in the last block.

If I can make it do that, I'm pretty comfortable with all of the remaining details. I just wanted to practise with relative positioning and try a layout that was a little different, to see if I could do it. I'm hadn't anticipated the footer to be such an issue.
Does that help?
riv_
PS: Now that you've figured out the fluid 3-column layout (which I just did myself recently, but don't like the look of) is it easy for you now? Do you use tables now or CSS?
I have the opposite experience... I felt good about it and I tell everyone to do the CSS and skip the tables!Laughing (but I don't have much experience with tables either, so...)
riv_
I am a total moron. For some reason, it took me all this time to notice that a margin of -10% will cut off the bottom of a block too!
Anyways, I found it now. I feel like a total imbecile, but I found it.
And now I can finish with the details...
I am always open to suggestions.
pudovkin
Hi! Nice you've found a solution! Smile
I saw you posted your URL (even in a ackward way, with "@" character...) 5 posts ago, but I wish to see the visual representation of what you've want.

About the layout I've made: right now, it's tableless. The main problem was not only about the columns, but what was inside the columns. There is lots of information boxes in each column. It's like a portal.
Overlapping problems occured in some specific cases, between two boxes and one column, for example.

When I was almost going for tables, I've found a solution which solved lots of problems. However, a table would only replace the columns (the box would still be tableless DIVs); so there won't cause any problem about the so-called "liquid layout".

The main reason I've stick with tableless is acessibilty. The acessibility browsers (those who "say" what is where for vision impaired people, for example) only understand tables as data structure, but not as layout structure.

But, what the hell... My layout is made and your's too. Congrats, riv_! Smile
littlegiant
Here's an excellent 3-column layout for a liquid display tableless design:

http://www.positioniseverything.net/articles/sidepages/jello-piefecta-clean.html
pudovkin
Great one! Thanks!
But it's a fixed size layout...
(I sent a few posts ago one that the three columns are liquid)
littlegiant
pudovkin, the jello-piefecta layout doesn't occupy the entire browser viewport but it is indeed a liquid display. Try hitting the 'Restore down' button on your browser (assuming you're on Windows) and resizing the browser window to see the jello-piefecta display expand and contract.
riv_
For the 3 column layout...have you tried using negative margins to deal with your overlap?
There's a good article at http://www.alistapart.com/articles/negativemargins/. It talks about the three column layout at the end, but I found the whole article quite helpful.
Sorry about the goofy url... I get caught up in what I'm doing and don't htink straight anymore. I think that's why I finally found this last night... I had been away from the page for a few days nursing a sick child. When I came back to it, the mistake just jumped out at me!
Anyways, good luck with your 3 columns. Let us know if there's anything we can do to help.
I'm off now to work out the details of my page now. Fonts, colours...
pudovkin
littlegiant, it doesn't matter which OS I use, but the browser I'm viewing.
I've tested the web page you sent and it doesn't show any signal of a liquid layout. When I make the window narrower, only the central column is resized (and there is a limit, which is the size of the "First Column in the source" title) and then it shows up scrollbars. When I make wider, nothing happens (understanding the "Restore down" button as maximize...).

Sorry, but this is not liquid (and it's closer to an absolute layout...).

The layout I'm using is flawless (the same scheme I've posted a link).
All columns horizontal are set by a percentage unit. If you use pixels (which is not a relative unit), you cannot have a 100% liquid layout in the 3-column case. My problem is solved, as I stated before.

About the URL: it's ok. Hope your kid is better.
riv_
Well... now it seems there's an IE6.? bug I'm dealing with... anyone know why my "Here I am" block is moving when the page is refreshed.
http://www.riverweb.frih.net
I don't have this version of IE myself, so I haven't seen it. Can someone send a screenshot? Or if you know of this bug/issue, can you help? Or refer me to someone that can?
And does anyone know why IE displays my font at a different size than FF and Opera, even when I set it manually?
I haven't checked in Netscape or Safari... if anyone's running those and it looks weird, would you please send me a screenshot?
Thanks...
pudovkin
Quote:
Can someone send a screenshot?

FF 1.5
IE 6.0
* Netscape will be the same as FF. Both are Mozilla based browsers.

Quote:
why IE displays my font at a different size than FF

I can see no difference. It's only about rendering.
riv_
pudovkin,
Thanks so much for the screenshots... that should help a lot.
IE is so frustrating! But I think I'm close...
I'm sure my newbie roots are showing now, but I really do appreciate your help in working through all this!
littlegiant
You're right, pudovkin. It's not a pure liquid layout. It's more of a hybrid between a liquid and fixed layout. Point taken.
Related topics
CSS OR TABLES
Navigation Script (javascript) Help Please!
How does it look
HTML help needed
CSS Help needed : Table emulation with divs
[resolved] Background Problem
div problems
See what you think to my site?
Rate it - New PHP site...
tables or div ?
CSS: Reference Div inside a Div
Jynx Anims V3 :: Flash Animations/Games
[Aporte] Como pasar de templates PSD a CSS y HTML
Website design
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.