Help w/column alignment

HTML & CSS
1

When I place content in the side-b div tag, the content appears in the side-a div tag when rendered in the browser. So, when I look at it in the editor, it shows the content is in the side-b div ,s it should be, but it doesn’t stay there when the browser is rendered to the client. Below is the css. I can post the html if necessary.
btw, the bgcolcolors image spans 740 pixels and colors both side-a and side-b columns, as it should.
thanks in advance.

#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
border: 0px;
width: 740px;
background: url(“/Images/bgcolcolors.gif”) repeat;
border-style: solid;
border-width: thin;
border-color: #2F1006;
}

#header {
margin: 0 0 15px 0;
background: #9BAD92;
font-family: Calibri, Verdana, Sans-Serif;
font-variant: small-caps;
font-size: 2em;
font-weight: bolder;
color: #2B2B2B;
text-align: center;
}

#side-a {
float: left;
width: 240px;
margin-left:15px;
}

#side-b {
margin: 0;
float: left;
width: 500px;
height: 1%;
}

#footer {
clear: both;
background: #9BAD92;
height:60px;
}

2

Tested locally it seems to work for me. You have an url for us to look at?

3 
 
 
* {
    padding: 0;
    margin: 0; }
 
body {
    font-family: Calibri, Verdana, Sans-Serif;
    font-variant: small-caps;
    font-size: 2em; }
 
#wrapper {
    text-align: left;
    margin: 0 auto;
    width: 740px;
    border: 1px solid #2F1006;/*border thin isn't supported within CSS 2.1 SPECS*/
    background: url('/Images/bgcolcolors.gif') repeat; }
 
#header {
    text-align: left;
    width: 740px;
    background: #9BAD92 url("/Images/bgcolcolors.gif") repeat;
    margin: 0 0 15px 0; }
 
#side-a {
    float: left;
    width: 240px;
    margin-left: 15px; }
 
#side-b {
    float: left; /*this is going to be aligned side by side with the div side-a?*/
    width: 500px; }
 
#footer {
    background: #9BAD92;
    height: 60px; }

Can I see your HTML? :wink:

4

thanks luki, appreciate you taking a look at it. Are you saying the css is correctly applied and that both columns receive content as it’s intended?

5

Your going to have to show us some more code to decide if it works or not… I dont how the application is being formatted.

6

Well, as their is not much code to go on, i invented your HTML lol:


<div id="wrapper">
	<div id="header">
	</div>
	<div id="side-a">Content for id "side-a" Goes Here</div>
	<div id="side-b">Content for id "side-b" Goes Here. More for b and nothing for a</div>
	<div id="footer">Content for id "footer" Goes Here</div>
</div>

The content for side b appears in that div, when i test this locally. Which in itself doesn’t say much: do you want a aligned aside with b? Do you have anything else nested…

Full code (css and html) or live url would be most helpfull :slight_smile:

7

If you are referencing dreamweaver there, then don’t even bother with design view. Code for the browser not for dreamweaver :slight_smile:

If not…then ignore this post :). But we will need the HTML.

8

Also, your floats don’t fit in the wrapper: you have a width of 740px on the wrapper but
float a has 240 + 15 margin and float b has 500px: that’s a total of 755px. If you want the floats to be aligned next to each other that is…

9

To add onto Lukis comments about the marfgins and floats, you are running into the double float margin bug here in IE6. The bug is triggered when you put a horizontal margin on the same direction as the float. Aka left margin and left float.

#side-a {
    float: left;
    width: 240px;
    margin-left: 15px; }

That needs display:inline added there :). That cures the bug.

10

I was going to add all the padding/margins/widths but I got lazy. LOL

11

And adding onto Ryans’ comment: you’ll need to contain the floats: adding overflow:hidden; to your wrapper

@Blake and Ryan: i also got lazy: only checked in Opera lol

12

We don’t know that he isn’t using a clearing mechanism already :). I doubt that the code in his first post was full CSS…he might have a clearing element or the clearfix in place.

Though, depending on his structure, he might not even need overflow:hidden;. We are assumin hte footer isn’t inside the wrapper :). If it is then no overflow/cleared element/clearfix is needed. Just the clear:both; (which is in his CSS already)

13

Well, i was only going on his posted code. But i missed the clear on the footer, just saw the two floated divs which are definitely inside his wrapper lol

14

Sorry, folks for not getting back to any of you. Thank you for your experience and patience. I got locked out of the site earlier, because as you can see from my post, it was logging me in as username. When i tried to get back in, it wouldn’t allow it for the longest time.
In the meantime I got called away. Just now getting home.
LEt me read through the post to see what you need of me.

15

here is the html
i’ve excluded the doc type declaration because i know it’s valid.

<body>
<!-- begin wrapper –><div id=“wrapper”>

&lt;!-- begin header --&gt;&lt;div id="header"&gt;
	Stone Masonry
&lt;/div&gt;&lt;!-- end header --&gt;
			
	&lt;!-- begin side-a --&gt;&lt;div id="side-a"&gt;
		&lt;h2&gt;Site Links&lt;/h2&gt;
		&lt;a href="logout.aspx"&gt;Log Out of Wsm Panel&lt;/a&gt;
		&lt;h3&gt;User Info&lt;/h3&gt;
        &lt;asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="WsmPanel/UInfo/Index.aspx"&gt;User Info&lt;/asp:HyperLink&gt;
	&lt;/div&gt;&lt;!-- end side-a --&gt;

	&lt;!-- begin side-b --&gt;&lt;div id="side-b"&gt;
		&lt;p&gt;Test&lt;/p&gt;
        &lt;asp:Label ID="lblSessValue" runat="server" Font-Bold="True" 
            Font-Names="Calibri" Font-Size="Small"&gt;&lt;/asp:Label&gt;
	&lt;/div&gt;&lt;!-- end side-b --&gt;
			
&lt;!-- begin footer --&gt;&lt;div id="footer"&gt;

<p>
<a href=“http://validator.w3.org/check?uri=referer”><img src=“http://www.w3.org/Icons/valid-xhtml10-blue” alt=“Valid XHTML 1.0 Transitional” height=“31” width=“88” /></a>
</p>
</div><!-- end footer –>

</div><!-- end wrapper –>
</body>
</html>

16

Ah, so I was right and the footer WAS inside the wrapper :).

So basically you’re wondering why in the editor it’s not appearing right?

My answer-don’t care about that :). The design views in editors are very out of date (dreamweaver uses presto, basically old opera).

Trust the browser not design view.

17

Hey, Ryan.
When I ftp the file to the server, the content in div side-b appears in side-a. I can’t show you the url because it’s located in a password protected area. I don’t use the design feature of vwd, just the code feature. I’m not concerned with how it looks locally, just how it displays when rendered by the browser once the file is sitting on the server and is live for the WORLD to see!
Make sense?
With that in mind, is the css, as I posted it originally, sufficient to provide a side by side rendering of the two columns? Bear in mind, what i’m seeing is the content in side-b appearing in side-a after the file has been parsed on the server.

18

I corrected the margin from 15 to 0 and now the content appears correctly.
Thank you for all your help. I’m going to need more of it! Stand by. hehhehe

19

You’re welcome :). You should have just adjusted the column width 15px less that way you can still get space between the columns, but whatever you want lol :).