Forum Moderators: not2easy
First let me write my HTML code (it's dummy).
<body>
<div id="rightContent">
<table border="1">
<tr />
...
...
...
</table>
</div>
<div id="leftContent">
<div id="navigation">
...
...
</div>
</div>
</body>
and I have CSS Rules as follows.
html, body{
margin:0;
padding:0;
width:100%;
}
div#rightContent {
float: right;
width: 70%;
height: 100%;
}
div#leftContent {
float: right;
width: 30%;
height: 100%;
}
The problem I'm facing is that the width of the table in rightContent area is bigger, and so it pushes my leftContent area including the navigation menu down.
How do i overcome this.
You're basically asking "How do I fit an elephant in a matchbox ?".
Options you have are
Scrollbars ?
Chop-off overflow ?
Make the elephant smaller ?
Get a bigger matchbox ?
You could make your left column 29% wide and float it left
or not float it not all, so that the 1% whitespace appears between your left and right columns.
It seems to me as if it's just the different table rendering causing a rounding error.
Horizontal scrollbar appearing just fine for me when I tried that.
Now the dummy code works, but I think I know what's going on in your real code.
You probably want space between the left column and the right column so the text is butting next to each other right? I suspect that there is some padding or margins going on with #rightContent and #leftContent. If so this would "push" your #leftContent down a rung because you're saying 70%+5px (a variable and absolute value which a 100% bag can't fit).
If this is what's happening, here's a solution to try:
#leftContent{
float: left;
width: 30%;
}
#rightContent{
float: right;
width: 70%;
}
.gutter {
padding: 10px;
margin-left: 5px;
}
<div id="leftContent">
<div class="gutter">
...
</div>
</div>
<div id="rightContent">
<div class="gutter">
...
</div>
</div>
Now what's going on is your rightContent and leftContent are perfectly fine in size, and your actual content is nested in smaller divs with your needed margins.
