Hammad Hammad - 5 months ago 11
Javascript Question

Dynamic layout width with CSS float

I am making a page where the page is segregated into two sections, left (70% width) and right (30%). Both the columns have dynamic content in them coming from the database.

What I want is that when the content in the right section finishes the left section should take all the width i.e 100%. 70% its own width and 30% freed by the right section. Here is the pictorial representation of what I want:

enter image description here

How to achieve this using only two divs? i.e left div and right div with percentages.

One might propose that I should Use three divs. One 70%, on the left, 30% on the right and 100% below both the divs but that is not what I want because of the dynamic contents of the divs. I want when the content of the right div is finished the left div should take 100% of the space then. The content on the right div can be 2 lines or 100 lines, that is purely dynamic.

Here is my current HTML structure:

<div class='main'>
<div class='left'></div>
<div class='right'></div>
</div>


Here is my CSS:

<style>
.main { width: 100%; }
.left { float: left: 70%; }
.right { float: left; width: 30%; }
</style>


But this is not working, with this code the content on left side stays inside 70% after content on right side is finished. Any suggestions?

Answer

Use the float first approach. Move the <div class='right'> above the left div in the mockup, actually, you won't need the left div if you want.

.right {
  float: right;
  width: 30%;
  height: 100px;
  background: yellow;
}
<div class='main'>
  <div class='right'>right</div>
  <div class='left'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
    <p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
  </div>
</div>

Example without the left div, the result is the same as above.

.right {
  float: right;
  width: 30%;
  height: 100px;
  background: yellow;
}
<div class='main'>
  <div class='right'>right</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
  <p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
</div>

Comments