Hello All,
I could use some help figuring out how to get two divs to appear under a header div. The header div contains text, which could be resized by the viewer's browser, so I'd like to not have to set a specific height for the header div in order to position the next two divs below it perfectly. I'd like the lower divs to just flow with it, but am unsure how to do that.
Here's an example of what I have now, which I'd like to fix:
<!-- m --><a class="postlink" href="http://www.schomer.com/test.html">http://www.schomer.com/test.html</a><!-- m -->
Thanks for any help!
SchomerBefore going any further - change your DTD to strict...Done!
(I've never understood the DOCTYPE. I guess I need to go read about it...)Originally posted by schomer
(I've never understood the DOCTYPE. I guess I need to go read about it...)
It took me a while to sort of understand it
you may find an article that alistapart (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->) wrote on it.
Quickly the difference between the strict, transitional, and frameset doctypes are that frameset is used when using frames (simple ;P), transitional allows for more tags to be using in your html. It is more loose on what it allows you to do for mistakes. Strict means that your code has to be more tidy basically. This can help narrow down possabilities for mistakes and stuff. That's my understanding anyways
Thanks for the info about doctypes!
My original question is still out there. I didn't mean to make it sound like it had been resolved by the doctype.
I don't see a way to position the lower two divs so they flow down the page with the vertical spacing of the header div.
<!-- m --><a class="postlink" href="http://www.schomer.com/test.htmlglad">http://www.schomer.com/test.htmlglad</a><!-- m --> the link helped w/ doctype
under #sidebar { add float: left; } that should help ya if im understanding what you are askign correctlyAdd
position: absolute;
to #main_containerWrap the 2 divs in a div container, and float the left one to the...uh...left. Like this:
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/alignment.html">http://www.tom-wallace.com/alignment.html</a><!-- m -->
Also, I recommend that you try to avoid defining width or height in combination with border or padding on the same element. It can cause trouble with alignment in IE 5 and 5.5, which can necessitate using the box model hack to fix it. Instead, define padding or margin on the tags within the divs (like <p>), but leave width undefined on those nested tags, as they will automatically fill 100% of the available space (for block level elements like <p>). This will free you from using CSS hacks to some extent.Tom, what you suggested works. I had unconsiously ignored that option because I wanted to have each of these three main divs separate from each other on the page, so users could position them anywhere they wanted to, via a CSS change.
I guess there's no way to do it without wrapping them, or without a fixed height on the header and using absolute positioning on one of the divs below it.
My issue with the fixed height for the header comes from the fact that there is text in it - which means, depending on the browser/platform, the height of the div gets larger or smaller. This is why I wanted the two divs below it to flow with it.
Giving the header a fixed height hasn't worked. I go into another browser, and the text is either cut off at the top. overlapping the next line of text, or just too high/low within the containing div. I don't know how to do this better, to make the text more consistently sized - consistent enough to put a fixed height on the div, so I can absolute position the sidebar and/or main content area under it.
Floating the sidebar left doesn't make it go higher on the page (at least not in Safari, which is what I'm looking at right now). It just goes all the way left. Maybe if I put all three divs on the page within a container, the sidebar float:left would go to the top? I'll check it out.
Thanks again, for all the feedback. Much appreciated!
SchomerSide bar add
#sidebar {
float: left;
clear:right;
}
main_content add
#main_container{
float:right;
}
I could use some help figuring out how to get two divs to appear under a header div. The header div contains text, which could be resized by the viewer's browser, so I'd like to not have to set a specific height for the header div in order to position the next two divs below it perfectly. I'd like the lower divs to just flow with it, but am unsure how to do that.
Here's an example of what I have now, which I'd like to fix:
<!-- m --><a class="postlink" href="http://www.schomer.com/test.html">http://www.schomer.com/test.html</a><!-- m -->
Thanks for any help!
SchomerBefore going any further - change your DTD to strict...Done!
(I've never understood the DOCTYPE. I guess I need to go read about it...)Originally posted by schomer
(I've never understood the DOCTYPE. I guess I need to go read about it...)
It took me a while to sort of understand it
you may find an article that alistapart (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/doctype/">http://www.alistapart.com/articles/doctype/</a><!-- m -->) wrote on it.Quickly the difference between the strict, transitional, and frameset doctypes are that frameset is used when using frames (simple ;P), transitional allows for more tags to be using in your html. It is more loose on what it allows you to do for mistakes. Strict means that your code has to be more tidy basically. This can help narrow down possabilities for mistakes and stuff. That's my understanding anyways
Thanks for the info about doctypes!My original question is still out there. I didn't mean to make it sound like it had been resolved by the doctype.
I don't see a way to position the lower two divs so they flow down the page with the vertical spacing of the header div.
<!-- m --><a class="postlink" href="http://www.schomer.com/test.htmlglad">http://www.schomer.com/test.htmlglad</a><!-- m --> the link helped w/ doctype
under #sidebar { add float: left; } that should help ya if im understanding what you are askign correctly
Addposition: absolute;
to #main_containerWrap the 2 divs in a div container, and float the left one to the...uh...left. Like this:
<!-- m --><a class="postlink" href="http://www.tom-wallace.com/alignment.html">http://www.tom-wallace.com/alignment.html</a><!-- m -->
Also, I recommend that you try to avoid defining width or height in combination with border or padding on the same element. It can cause trouble with alignment in IE 5 and 5.5, which can necessitate using the box model hack to fix it. Instead, define padding or margin on the tags within the divs (like <p>), but leave width undefined on those nested tags, as they will automatically fill 100% of the available space (for block level elements like <p>). This will free you from using CSS hacks to some extent.Tom, what you suggested works. I had unconsiously ignored that option because I wanted to have each of these three main divs separate from each other on the page, so users could position them anywhere they wanted to, via a CSS change.
I guess there's no way to do it without wrapping them, or without a fixed height on the header and using absolute positioning on one of the divs below it.
My issue with the fixed height for the header comes from the fact that there is text in it - which means, depending on the browser/platform, the height of the div gets larger or smaller. This is why I wanted the two divs below it to flow with it.
Giving the header a fixed height hasn't worked. I go into another browser, and the text is either cut off at the top. overlapping the next line of text, or just too high/low within the containing div. I don't know how to do this better, to make the text more consistently sized - consistent enough to put a fixed height on the div, so I can absolute position the sidebar and/or main content area under it.
Floating the sidebar left doesn't make it go higher on the page (at least not in Safari, which is what I'm looking at right now). It just goes all the way left. Maybe if I put all three divs on the page within a container, the sidebar float:left would go to the top? I'll check it out.
Thanks again, for all the feedback. Much appreciated!
SchomerSide bar add
#sidebar {
float: left;
clear:right;
}
main_content add
#main_container{
float:right;
}