Anonymous 0

I have 2 floated divs, both of which are sized in % to allow for larger resolutions. What I want is for the second empty div to reach all the way to the right of the screen (minus 10px body padding) and still fit the same space when empty (as this div is to be populated by the user with images from javascript).

By eye and using % widths I can get it fairly close, but when zooming out for example, the box is clearly not the same as the one on the left, or even in line with my 100% width topbar.

Here is the code I have:

body {
    height: 100%;
    padding: 10px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.95em;
    font-weight: normal;
    background-color: #fafafa;
    color: #000;
}

#map_canvas {
    height: 88%;
    width: 60%;
    float: left;
    clear: left;
}

#tab_box {
    float: left;
    position: relative;
    height: 88%;
    width: 37.6%;
    overflow: hidden;
    margin: 0 0 0 10px;
    padding: 0;
}

EDIT: I managed to solve my problem, using margin-left:

body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.95em;
    font-weight: normal;
    background-color: #fafafa;
    color: #000;
}

#map_canvas {
    height: 88%;
    width: 60%;
    float: left;
    clear: left;
}

#tab_box {
    position: relative;
    height: 88%;
    overflow: hidden;
    padding: 0;
    margin-left: 61%;
    width: 39%;
}

Some of this code may be unnecessary, but I included exactly what I have for completeness. Basically, I used margin-left rather than float on the second div to keep the divs separate. Some of this code may be silly, but at least it does the job.

2 answers

Joe 0
0
points
This was chosen as the best answer

I'm the OP, just updated the code with a solution (not necessarily the best one!).

Used margin-left, seems to work!

Here's the code again if you need it:

body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 0.95em;
    font-weight: normal;
    background-color: #fafafa;
    color: #000;
}

#map_canvas {
    height: 88%;
    width: 60%;
    float: left;
    clear: left;
}

#tab_box {
    position: relative;
    height: 88%;
    overflow: hidden;
    padding: 0;
    margin-left: 61%;
    width: 39%;
}
Answered about 6 years ago by Joe
1
point

You can always have the body enforce it's default margin ruleset.

For instance, put in your two divs with width: 50%; but then have the body use margin: 10px; it would work out perfectly for you. You can also wrap those two divs into a parent div, and then setting the padding to padding-right: 10px;

Answered about 6 years ago by Vinny Burgh