Two divs side by side - Fluid display

Question

I am trying to place two divs side by side and using the following CSS for it.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

The HTML is simple, two left and right div in a wrapper div.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.

So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.

Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.

I hope there is a fix for that.

Thank you.

EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...

Solution 1

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

Solution 2

Try a system like this instead:

.container {
  width: 80%;
  height: 200px;
  background: aqua;
  margin: auto;
  padding: 10px;
}

.one {
  width: 15%;
  height: 200px;
  background: red;
  float: left;
}

.two {
  margin-left: 15%;
  height: 200px;
  background: black;
}

<section class="container">
  <div class="one"></div>
  <div class="two"></div>
</section>

You only need to float one div if you use margin-left on the other equal to the first div's width. This will work no matter what the zoom and will not have sub-pixel problems.

Solution 3

This is easy with a flexbox:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Solution 4

Here's my answer for those that are Googling:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

Here's the HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

Solution 5

Make both divs like this. This will align both divs side-by-side.

.my-class {
  display : inline-flex;
} 

View more solutions

Comments

[john ktejik]

There were two box divs? What's a box div? This question is not clear.

[Waleed]

It is not helping, the zooming thing is fixed now, it says fixed, but the right div is now slided down and fixed at that position

[dezman]

You probably messed something up, check your code, or tell me the link to the jsFiddle and ill look at it.

[Waleed]

aww man, I am sorry. The divs were already fixed by my above CSS which I gave, its just the "box" divs in both left and right side, had padding and margin in %, because right div was short thats why, It had enqual padding and margins. Sorry...

[JMD]

Glad to hear you found and accepted your own answer, but what is #sides? It's not in your original question.

[julian soro]

Nice, flexbox is definitely the way to go

[Rahul Gandhi]

Using float:left on the both child (#right) will kill the height of parent div (#wrapper). So this solution depends on the requirement . Better to give float on one child only.(#left in your case)

[Adrian]

According to this site, flex should work on 94% of browsers. caniuse.com/#search=flex

[Mr. Hugo]

@Adrian That is 1 in 20 people unable to use your site... Is that really an option?

[Joe]

@JoostS isn't that 94% of the different browsers available (as in it always works on chrome, Mozilla, IE etc etc), not that it works 94% of the time regardless of browser?

[Mr. Hugo]

@Adrian No. It is the amount of users of the browsers that do or do not support the feature.

[Alan Thomas]

Currently it stands at 97+%. Basically, I'd say if you don't need to target IE8, go with flexbox, in this case and others. Flexbox solutions are almost always more elegant and easier to reason about.

[shmup]

@AlanThomas even then, targetting IE11 means you need to be aware of the Known Issues (there's 8 on caniuse.com at the moment)

[cazort]

If you have an existing website, don't ever go by browser share, look at your own traffic logs. On most of my sites, IE8 accounts for only about 0.01% of traffic. However...I have seen specific sites where the audience is users in corporations, government, or non-profit organizations using a lot of legacy software, and then old IE browser usage can be surprisingly high.

[Robert Moskal]

Totally the way to go in 2019!

[jvriesem]

Shouldn't the <section> be a <div> instead?

[jvriesem]

Shouldn't we use class rather than id so that this could be replicated on other parts of the page?

[Honza]

What is reason for overflow:hidden ? It does not seem to be necessary...

[CoolPerson879]

You do not need to add the overflow:hidden. It Just hides the scrollbar

[Samuel]

With newer browsers, this is the shortest and easiest way to do that.