Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

2-column layout; sidebar messing up IE 1

Status
Not open for further replies.
artguy

artguy

Technical User
Feb 2, 2001
117
US
I'm having difficulties getting IE to display how I'd like i to. Firefox seems to do a good job so I wanted to make sure my code was how it should be to create my desired results. I'd like the image to display in the left "column" with a sidebar box underneath it. I would then like the main content start at the top of the next column.

That's all fine and good and works UNTIL I add a box underneath the main content in the second column and it gets pushed down to the bottom of the page.

Can any one see what I'm messsing up or supply a place to find the solution on another site?

Thanks in advance for your help.

Here's the code with the CSS from the external file to follow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<title>Test Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="maincontainer">
<div id="content">
<div class="inlineimage"><img src="../images/supplements.jpg" width="181" height="193" />
<div id="sidebar">
<h3>Headline 3</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis magna. Sed id arcu et dui placerat aliquam. Ut accumsan dapibus mi. Nulla sit amet arcu sed metus suscipit dapibus. </p>
<p>Vivamus sit amet ipsum sit amet sem fermentum viverra. Integer est. Donec sagittis vestibulum dolor. Fusce fringilla tortor ut erat. Sed neque. Mauris et mauris eu odio vehicula tempus. Nunc elit tellus, pellentesque id, vulputate ac, congue ac, dui.</p>
</div>
</div>
<div class="fl"><h1>Main Head</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lorem. Praesent congue tristique enim. Nunc eleifend adipiscing diam. Nullam bibendum quam ac lorem. Nulla ut sem ut lacus mollis luctus. In suscipit bibendum arcu. Fusce auctor urna quis dolor. Fusce sodales felis vitae magna. Phasellus pulvinar congue purus. Morbi gravida. Maecenas ullamcorper nunc. In id massa. Fusce eget leo. Vivamus nunc augue, scelerisque non, porta quis, tempus quis, odio. Cras commodo. Mauris libero nibh, faucibus ac, lobortis non, pellentesque nec, erat. Curabitur venenatis, massa et ornare imperdiet, tellus tellus cursus sapien, sit amet varius magna enim et velit.</p>
<p> Integer a risus et ipsum tincidunt ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu dolor eget tellus suscipit fermentum. </p>
</div>
<div class="supplements"><div class="category">
<h2>Heading</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Quisque vel elit eu tortor adipiscing aliquet.</li>
<li>Maecenas lobortis sem ut neque.</li>
<li>Donec varius viverra turpis.</li>
<li>Suspendisse placerat tempor mi</li>
</ul>
</div>
<div class="category">
<h2>Heading</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Quisque vel elit eu tortor adipiscing aliquet.</li>
<li>Maecenas lobortis sem ut neque.</li>
<li>Donec varius viverra turpis.</li>
<li>Suspendisse placerat tempor mi</li>
</ul>
</div>
<div class="category">
<h2>Heading</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Quisque vel elit eu tortor adipiscing aliquet.</li>
<li>Maecenas lobortis sem ut neque.</li>
<li>Donec varius viverra turpis.</li>
<li>Suspendisse placerat tempor mi</li>
</ul>
</div>
<p>Quisque vel elit eu tortor adipiscing aliquet. Maecenas lobortis sem ut neque.
</p>
</div>
</div>
<div class="spacer"></div>
<div class="footer">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</div>
</body>
</html>

And here is my CSS:

body {
background-color: #660000;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
}

p {
margin: 0 0 10px 0;
}

h1 {
font-size: 20px;
margin: 0 0 10px 0;
}

h2 {
font-size: 18px;
margin: 0 0 10px 0;
}

h3 {
font-size: 18px;
margin: 0 0 10px 0;
}

#content {
width: 700px;
padding: 0 20px 0 20px;
margin: 20px 0 0 0;
}

#maincontainer {
margin: 0 auto;
}

#sidebar {
float: left;
width: 151px;
margin: 10px 0 0 0;
padding: 15px;
background-color: #FFFFCC;
color: #990000;
}

.float {
float: left;
margin: 0 0 0 0;
}

.inlineimage {
float: left;
margin: 3px 10px 10px 0;
}

.nobullets {
list-style: none;
margin: 0 0 10px 0;
padding: 0;
}


.spacer {
clear: both;
}

.supplements {
width: 485px;
margin: 0 0 10px 190px;
padding: 10px;
background-color: #999900;
border: 1px solid #333;
}
 
Sort by date Sort by votes
Ahh, the good ol' BOX MODEL HACK.

Code: 
.supplements {
    width: 485px;
    margin: 0 0 10px 190px;
    padding: 10px;
    background-color: #999900;
    border: 1px solid #333;
    voice-family: "\"}\""; 
    voice-family: inherit;
    width: 483px;
}
	
html>div.supplements {
  	width: 483px;
}

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Are you serious? It worked. I'll be darned. Thanks a million.

Quick question though, I tried it with just changing the width to 483px as you posted and it worked without the "voice family" lines just fine. Do I really need those 2 lines if it was just my width messing me up the whole time?

bob
 
Upvote 0 Downvote
what you're doing there is making the width 483px. It will looks slightly (hard to tell w. the naked eye) different in IE and other browsers. If you had a border width of 10px, you would definitely see the difference.

The box model hack gives you the best of both worlds. For IE, it pretends the width is 2 pixels more, because it doesn't include borders, padding, or margins in its understanding of width. For other cool browsers, it is understood that the width includes padding, borders, margin, and therefore the box will be exactly the same width in all browsers.

Confused?

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Now I understand. So if I don't care if it's EXACTLY the same width, I can get rid of the hack and just make the box smaller. If I want them the same, the hack just "hides" the revised width from other browsers and gives it to the likes of IE to behave like the rest of the world wishes it would in the first place (which means include margin, padding, width, etc.) Yet another reason for me to love Firefox as much as I do.

Thanks for your help and explanantion.

bob
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
229
tyutghf
tyutghf
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
187
pendle666
pendle666
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
181
Carlvic
Carlvic
jason.lex
  • Locked
  • Question
Caption slide up?
Replies
0
Views
124
jason.lex
jason.lex
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
168
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top