Home/ Questions/Q 8301023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T16:46:54+00:00

I have this simple css layout at the heart of my problem: The leftside

  • 0

I have this simple css layout at the heart of my problem:

enter image description here

The leftside is set to float:left and a width of 70%, the right is set to float:right and a width of 30%.
However this leaves me with a gap where they don’t quite touch like i need them too:

enter image description here

To solve that i can change the percentages to 70.1% and 30%. which means most of the time the gap is gone but occasionally the rightside gets pushed down below the leftside which is no good!

I tried setting the width of the rightside to auto and it pushed the rightside down again but looked like this:

enter image description here

Then i tried getting rid of the the float:right on the rightside. Which ALMOST works except the register_container dropped all the way down to the bottom even though the rest of the divs (also inside of the rightside but listed after the register_container) sat on the right as they should:
enter image description here

Here’s a paste of my css, and here’s the site I have temporarily uploaded: http://greenevent.site50.net/index.php

If someone could help me solve my problem that would be great! (in case it’s not clear, i want the arrangement to look like the first website image posted but without the thin gap.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Switch your float: right; to float: left; on your right container. You need to assign a width to the container as well.

    There is a bug in webkit browsers that means you don’t get 100% at times which can be a bit of a pain.

    http://jsfiddle.net/spacebeers/Lyphr/2/

    If you change the width on your right container to 27% in Chrome’s dev tools you get the layout you’re after.

    • 0