CODEWITHSUNDEEP
htmlcss
Bahador Saket
Bahador Saket

Reputation: 1035

Floating percentage width layout

I have 4 Divs and want to position them in my page as below:

Desired layout

I want to add many other svg files to Div 4 later and I want Div 4 to be scrollable. Notice: I want only Div 4 be scrollable and not my entire page.

This is how my HTML and CSS looks so far: 

#sides {
  width: 100%;
  font-size: 12px;
  overflow: hidden;
  /* contain floated elements */
}
.div1 {
  float: left;
  width: 75%;
  height: 60%;
}
.div2 {
  margin: 0;
  padding: 2;
  float: left;
  width: 30%;
  height: 35%;
}
.div3 {
  float: left;
  width: 30%;
  height: 15%;
}
.div4 {
  float: left;
  width: 100%;
  height: 40%;
}
<div id="sides">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
</div>

Any idea about it?

Upvotes: 2

Views: 3334

Answers (6)

Jack jdeoel
Jack jdeoel

Reputation: 4584

change a bit your CSS and html,

#sides {
width: 100%;
font-size: 12px;
height:100%;
position:absolute;        
background:red;
/* contain floated elements */
}
.div1 {      
width: 60%;
height: 60%; 
float:left;
background:pink;  
}
.div2 {
background:green;  
float: left;
width: 40%;
height:40%;      
}
.div3 {  
height:20%;
float:left;
width: 40%;background:blue;    
}
.div4 {         
overflow-x:scroll;
width: 100%;
height: 40%;background:yellow;     
}
#div4{    
width:180% !important;    
height:auto;
}

html

  <div id="sides">
     <div class="div1">Div 1</div>
     <div class="div2">Div 2</div>
     <div class="div3">Div 3</div>
     <div class="div4"><div id="div4">Div 4 Div 4 Div 4</div></div>
  </div>

https://jsfiddle.net/qykfv6Lp/2/embedded/result/

Upvotes: 0

misterManSam
misterManSam

Reputation: 24702

Your example requires a few small tweaks:

  • html,body and the parent div #sides need height: 100% in order for their children to have percentage heights.

  • The widths and heights of the divs need to add up to 100%. For example, the .div1 is 75% width, so .div2, which sits along side it, needs to be 25% width.

  • box-sizing: border-box incorporates borders and padding into the width and height of each div. Read more here.

  • The scrolling div is given overflow-x: scroll so that its contents will scroll when it overflows, and white-space: nowrap prevents inline elements (such as the images in my example) from wrapping. Make sure that any elements inside the div will not be taller than it.

Example

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
#sides {
  height: 100%;
  width: 100%;
}
#sides > div {
  float: left;
  padding: 10px;
  /*box-sizing: border-box prevents this padding from blowing out the width and height*/
}
.div1 {
  width: 75%;
  height: 60%;
  background: #E91E63;
}
.div2 {
  float: left;
  width: 25%;
  height: 35%;
  background: #9C27B0;
}
.div3 {
  width: 25%;
  height: 25%;
  background: #2196F3;
}
.div4 {
  width: 100%;
  height: 40%;
  background: #009688;
  overflow-x: scroll;
  /*overflow-x can also be given the value "auto" to only scroll when required*/
  white-space: nowrap;
}
.div4 > * {
  vertical-align: top;
  max-height: 100%;
  margin: 0 10px 0 0;
}
<div id="sides">
  <div class="div1">Left</div>
  <div class="div2">Right-top</div>
  <div class="div3">Right-bottom</div>
  <div class="div4">
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
    <img src="http://www.placehold.it/200" />
  </div>
</div>

Upvotes: 3

TDHofstetter
TDHofstetter

Reputation: 268

Now as to this question. Bahador, try using "position:absolute;" in the CSS for each of your DIVs. When you do that, you can individually specify "top" and "left" coordinates for each DIV. In short, you can make a table-like structure. You can do something similar with "position:fixed;" and "position:relative;", each having its own individual positioning characteristics.

As to scrolling... the simplest way to make one DIV scrollable is to populate it with more content than can fit within it. Likewise, the simplest way to make one non-scrollable is to populate it with no more content than will fit within it.

Upvotes: 1

Antonio Hern&#225;ndez
Antonio Hern&#225;ndez

Reputation: 466

To make your div 4 scrollable just define overflow: scroll in its CSS, that way the content will hide inside the container instead of flowing out.

Upvotes: 1

Peter Girnus
Peter Girnus

Reputation: 2739

simply define overflow: scorll which clips the content but adds a scrollbar to see the rest of the content.

See this pen for an example:

http://codepen.io/xPetrus/pen/rOOzWR

Upvotes: 0

pyron_orion
pyron_orion

Reputation: 635

I made a fiddle for this, check it out: JSfiddle

.div4 {
    overflow:auto;
 }

Just put the overflow property to auto for a scrollbar( auto will make a scrollbar appear whenever needed) and put hidden for the other divs to clip the content and hide the scrollbar.

Also,I edited the percentages in your code(in the JSfiddle) a bit because you are exceeding 100% width and thats why the div2 and div3 werent getting stacked against each other.

Upvotes: 0

Related Questions