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...

Cofer

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

Answer 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;
} 

Cofer

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

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) – Nomology

Answer 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.

Decoration

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 – Cofer

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

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... – Cofer

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

Answer 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>

Strother

Nice, flexbox is definitely the way to go – Bornu

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

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

@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? – Duleba

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

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. – Candancecandela

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

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. – Reseta

Totally the way to go in 2019! – Danyelldanyelle

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

Answer 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>

Relation

Answer 5

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

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

Flavopurpurin

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

Answer 6

You can also use the Grid View its also Responsive its something like this:

#wrapper {
   width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

#left{
    text-align: left;
    grid-column: 1/4;
}

#right {
    text-align: right;
    grid-column: 4/6;
}

and the HTML should look like this :

<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>

here is a link for more information:

https://www.w3schools.com/css/css_rwd_grid.asp

im quite new but i thougt i could share my little experience

Holifield

Answer 7

#wrapper{
  display: grid;
  grid-template-columns: 65% 1fr;
}
#left {
  grid-column:1;
  overflow: hidden;
  border: 2px red solid;
}

#right {
  grid-column:2;
  overflow: hidden;
  border: 2px blue solid;
}

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

Soliz

Answer 8

#sides {
  margin: 0;
}

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

#right {
  float: left;
  width: 25%;
  overflow: hidden;
} 

<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

Linkous

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

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

Answer 9

<div style="height:50rem; width:100%; margin: auto;">
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left;  background-color: black;"></div>
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left;  background-color: black;"></div>
  <div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left;  background-color: black;"></div>
</div>

margin-right isn't needed though.

Merna

Answer 10

.container {
  display: flex;
}

.box1, .box2 {
  flex: 1;
  padding: 20px;
  margin-left:5px;
  background-color:green;
  border: 1px solid #000;
  color:white;
**strong text**
}

<div class="container">
  <div class="box1">Div 1 </div>
  <div class="box2">Div 2 </div>
</div>

Parlor

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Douse