Debbie Silbert wrote:
>Hello:
>I am trying to layout a page as follows:
>
>Container
> Header
> End Header
>
> MiddleContainer
> MainText
> MainText End
>
> NavBar
> NavBar End
> MiddleContainerEnd
>
> Footer
> Footer End
>Container End
>
>#container {
>margin: 0 auto;
>width: 724px;
>position: relative;
>padding: 0 10px 0 10px;
>text-align: left;
>background: #fff;
>font: 1em Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
>color: #666666;
>}
>
>#header {
>background-color: #ffffff;
>border-bottom: 1px #000000 solid;
>padding-left: 125px;
>padding-right: 125px;
>padding-top: 10px;
>padding-bottom: 10px;
>}
>
>#middlecontainer {
>position: relative;
>float: left;
>}
>
>#maintext {
>width: 425px;
>float: right;
>margin: 0 0 0 275px;
>padding: 0px;
>background-color: #ffffff;
>}
>
>#navbar {
>float: left;
>margin: 0;
>width: 20px;
>}
>
>I want the maintext and navbar sections to be two columns that are
>top-aligned with the bottom of the header section; that is, they are
>side-by-side. I cannot figure what float or position properties are
>required of these two sections to make them be side-by-side. I sincerely
>appreciate any help in figuring this out.
>
>Thank you!
>
Hi Debbie,
If you give some background colors to the div's, you can see where you
are: testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-2col-debbie.htm>.
Now in your code the maintext has a width and a margin-left and a
float-right: for IE that's one property too much, and IE is starting
under the navbar.
You can also float the mainbox left instead of right, give it a small
margin-left, and declare the width.
See other testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-2col-debbie-new.htm>.
Another approach is a float:left for the navbar, and no float for the
maincontent > filling up the rest.
Giving the maincontent a margin-left of some more than the width of the
navbar ensures the maincontent will stay aside of the navbar, and not
jumping under it as soon as that is possible.
So there is a lot to play! :-)
You can find some good starting points and more hints in this one
<http://www.fu2k.org/alex/css/onetruelayout/example/interactive?order=2-1&width=25-75&equal_height=1&snap=1&op8_fix=1&longest=1&time=1130330054918>
or this one <http://webhost.bridgew.edu/etribou/layouts/skidoo/>
or another one from the 2 column Wiki page
<http://css-discuss.incutio.com/?page=TwoColumnLayouts>!
Greetings,
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
