Clever Geek Handbook

How to maintain a gap between two fluids?

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

The web page must work with both 1024px and 1620px definitions, so they must be current if their width is increased. All margins look great except for the vertical space between the left and right divs. I am using jquery to keep the two divs equal in height. How can I keep the space between separators? I use percentages for the width of the div, so I expand the width of the screen, the space between the divs increases, so the path is much wider than the left and right margins.

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
+2


source to share


3 answers


If you're already using jQuery to maintain height, why not use it to maintain width reasonably?



+1


source


if you want the gap to remain even, just set the width. you can still have a fluid layout with px margins ....

.divLoginRight { margin-left: 10px; }


why is it too difficult?

+1


source


I think you misunderstood.

Fluid construction is commonly used as a way to maintain layout while decreasing width.

I think you should try to design the widest possible width (1620px here) and then take into account the fact that the screen can be scaled down to 1024px.

Also, if you want the margin to have a constant width, regardless of whether you have to use pixels, this will be a little more complicated.

Last but not least, you can include the min-width argument. It's not that liquid, but it's just that rough if you resize your window to say 300px ...

Pulling it all the way out (positioning only):

.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 is just to make sure the elements take up as much as possible.

+1


source






More articles:


All Articles