Hi everyone, I need to put 2 divs side by side. But what's more important, I want this to display correctly in IE6/7. I have managed to succeed this with Firefox though. My code:
#container{
padding:10px;
}
#left{
float:left;
width:500px;
}
#right{
width: 300px;
float:right;
padding:7px;
background-color:#F0FCEB;
}
<div id="box">
<div id="left">Some content here</div>
<div id="right">Some content here 2</div>
<div style="clear:both;"></div>
</div>
The results are as shown below:
Desired Output (FF Output):
IE6/7 Output:
How can I get rid of this unnecessary padding in IE, or is there any other method?
Note: I use jQuery and Nifty for jQuery to create rounded corners.
-
Use a
<table>, they are the best for side-by-side alignments in my experienceturezky : It actually was, however with all the trends around changing tables to divs I though I might follow the crowd and switched it to tabless (as one of the tags for the question implies) :)
Calvin : That wouldn't be semantically correct as there's no tabular data to be displayed.Click Upvote : Why fight the system? Tables are the best when it comes to side by side alignment in web pages. I know it shouldn't be this way, but that's just the way it is. See: http://stackoverflow.com/questions/591539/forms-can-they-be-done-without-tablesDont use a table! i often use an unordered list for long forms. but here 2 divs may work. Make sure that for accessibility you have the Ara: marked up as a
<label>and you associate it with the input fieldmake sure that you have reset the default padding and margin for the items before expressing yours.
#box label, #box input {margin:0;padding:0;}turezky : Thanks for the thumbs up!Some content here 2
What's that content? Your example works as-is, so it's something in the content itself that causes the issue.
Does it perhaps include a form, as it looks like on the shot?
<form> has a default top/bottom margin, and how vertical margins collapse is a matter of some confusion and browser differences (it's usually best avoided if possible). So the mini-reset rule:
form { margin: 0; }may help.
turezky : Works like a charm!!! Thanks a lot!
Subscribe to: Post Comments (Atom)
0 comments:
Post a Comment