how to maintain spacing between two fluid divs?

Question

Hi,

I have a parent div with two child divs (one floated left and one right) inside the parent.

The web page must work on both 1024px definitions and 1620px so they need to be fluid if expanded in width. All margins look fine with the exception of the vertical space between the left and right divs. I am using jquery to maintain equal height of the two divs. How can I keep the space between the divs fixed? I am using percentages for the div widths so as I expand the screen width, the space between the divs increases so is way way wider than the left and right margins.

The markup:

<div class="divLoginMain">
<div class="divLoginLeft">
    <div class="divH4Title">
        <h4 class="h4Title">Welcome to Our Website</h4>
    </div>
    <table cellspacing="0" class="borderNone">
        <tr>
        </tr>
        <tr>
        </tr>
    </table>
 </div>
 <div class="divLoginRight">
        <div class="divH4Title">
            <h4 class="h4Title">Status - Logged In</h4>
        </div>    
    <table cellspacing="0" class="borderNone">
        <tr>
        </tr>
        <tr>
        </tr>
    </table>
</div>
</div>

And the CSS:

.divLoginMain
{
     margin-top:5px;
     margin-left:.6%;
     margin-right:.2%;
border:  solid 3px #191970;
border-spacing: 0;
width:97.5%;
padding-top:7px;
padding-bottom:7px;
padding-left:7px;
padding-right:7px;
overflow:hidden;
}

.divLoginLeft
{
     border:  solid 3px #191970;
border-spacing: 0;
float:left;
width:61.5%;
padding-top:0px;
padding-bottom:10px;
padding-left:16px;
padding-right:16px;
text-align:left;
font-family:Arial;
color:#17238C;
}

.divLoginCenter
{
     border:collapse;
float:left;
width:1px;
}

.divLoginRight
{
     border:  solid 3px #191970;
border-spacing: 0;
float:right;
width:31.5%;
padding-top:0px;
padding-bottom:10px;
padding-left:16px;
padding-right:16px;
text-align:left;
font-family:Arial;
color:#17238C;
}


Thank you,
James

Answer 1

If you're already using jQuery to maintain the heights, why not also use it to intelligently maintain the widths?

Answer 2

if you want the gap to stay uniform, just fix the width. you can still have a liquid layout with px margins....

.divLoginRight { margin-left: 10px; }

why overcomplicate?

Answer 3

I think you got the direction wrong.

Fluid design is usually used as a way to preserve layout when REDUCING the width.

I think you should try to design for the largest width (here 1620px) and then take into account the fact that the screen might be reduced to 1024px.

Also, if you want the margin to have a constant width regardless, then you will have to actually use pixels, but this is going to be a bit more difficult.

Last but not least, you may wish to include a min-width argument. It is not that fluid, but it just so gross if you resize your window to say 300px...

Pulling it altogether (just the positioning stuff):

.divLoginMain
{
margin-top:5px;
margin-left:.6%;
margin-right:.2%;
width:97.5%;
}

.divLoginLeft
{
border:  solid 3px #191970;
float: left;
width: 100%; /* Impossible */
margin-right: 34%;
}

.divLoginRight
{
border:  solid 3px #191970;
float: left;
width: 100%; /* Impossible */
margin-left: 67%;
}

Note that the width are just to make sure that the elements occupy as much as possible.