This content has been marked as final.
Show 2 replies
-
1. Re: Divs not lining up properly
Newsgroup_User May 30, 2007 8:39 AM (in response to BruceCSI2)float your left column.
#leftcolumn {
float: left;
}
Add a clearing <br> as below to wrap the wrapper around the two floated
<divs>.
<div id="wrapper">
<div id="leftcolumn">This is the left column.</div>
<div id="rightcolumn">This is the right column.</div>
<br style="clear: both;">
</div>
You dont need position: relative; for either the left or right <div>
unless you are intending to insert something within them that is
absolutely positioned.
BruceCSI2 wrote:
> This one always gets me and I can't figure it out. I have 3 divs, one container
> and 2 "columns" that reside inside the container, and the 2 columns are
> supposed to line up next to each other. However, the right column div always
> drops down below the left column, even though it should be next to it. In fact,
> it even drops below the wrapper div. Here's the code:
> ------------------------------------
> body {
> text-align:center;
> margin:0 auto;
> background-color:#666666;
> }
> #wrapper {
> text-align:left;
> width:750px;
> border:1px solid #000;
> background-color:#fff;
> }
> #leftcolumn, #rightcolumn {
> font-family:Arial, Helvetica, sans-serif;
> font-size:small;
> color:#000;
> border:2px dotted #ccc;
> position:relative;
> margin-left:25px;
> width:300px;
> }
> #rightcolumn {
> float:right;
> background-color:#0CF;
> margin-right:25px;
> }
>
> -->
> </style>
> </head>
>
> <body>
> <div id="wrapper">
> <div id="leftcolumn">This is the left column.</div>
> <div id="rightcolumn">This is the right column.</div>
> </div>
> </body>
> -------------------------------------------
> Note that the page is for an intranet site, behind a firewall so I can NOT
> post a link to it. Sorry. Any help would be appreciated.
>
-
2. Re: Divs not lining up properly
BruceCSI2 May 30, 2007 9:26 AM (in response to BruceCSI2)Thanks, Os! It's always the simple stuff that gets me...


