Fluid percentage-based layout

I have four separate Divs that I would like to position on my page in a specific layout. Here is an image showing how I want them positioned:

https://i.sstatic.net/KBZ1U.png

In the future, I plan to add multiple svg files to Div 4 and I want it to be scrollable. Please note that I only want Div 4 to be scrollable, not the entire page.

Below is a snippet of my current HTML and CSS code:

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

Do you have any suggestions or ideas on how to achieve this layout?

htmlcss

Answer №1

To make your example work properly, you'll need to make some adjustments:

  • Make sure that html,body and the parent div #sides have a height: 100% so their children can have percentage heights.

  • The total widths and heights of the divs should add up to 100%. For instance, if .div1 is 75% width, then .div2 next to it should be 25% width.

  • Use box-sizing: border-box to include borders and padding in the width and height calculations of each div. You can find more information here.

  • The scrolling div needs overflow-x: scroll to enable scrolling when content overflows, and white-space: nowrap prevents inline elements (like images) from wrapping. Make sure that no elements inside the div exceed its height.

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>

Answer №2

For your div 4 to become scrollable, simply specify overflow: scroll in its CSS. This will ensure that the content remains within the container without overflowing.

Answer №3

When it comes to this problem, Bahador, you should consider using "position:absolute;" in the CSS for each of your DIVs. By doing this, you can specify individual "top" and "left" coordinates for each DIV, creating a table-like structure. You can achieve a similar effect with "position:fixed;" and "position:relative;", each offering unique positioning properties.

As for scrolling... the easiest way to make a DIV scrollable is by adding more content than it can display. Conversely, if you want to prevent scrolling, simply ensure that the content does not exceed the space available within the DIV.

Answer №4

I created a demonstration for this issue, feel free to take a look: JSfiddle

.container {
    overflow:auto;
 }

To display a scrollbar when necessary, set the overflow property to auto. Use hidden for other containers to clip content and hide the scrollbar.

I also adjusted the width percentages in your code (in the JSfiddle) to ensure that div2 and div3 align properly without exceeding 100% width.

Answer №5

To put it simply, you can use the CSS property overflow: scroll to clip the content and display a scrollbar for viewing the rest of the content.

For a clear example, take a look at this demonstration:

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

Answer №6

Revamp your CSS and HTML code slightly,

#sides {
width: 100%;
font-size: 12px;
height:100%;
position:absolute;        
background:red;
/* responsible for containing 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>

Check out the result here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop a DIV element that remains constant throughout different web pages without having to reload

How can I create a non-reloading div at the top of my website that contains an MP3 player which plays continuously while users browse through the site? I am working with Joomla and would like to avoid using Iframes for search engine optimization purposes ...

jqueryajaxhtml

When generating a docx file with html-docx-js, it lacks the capability to incorporate external CSS class styles into the document

I have been utilizing the html-docx-js module to convert html content into docx format. However, I am facing an issue where most of my CSS is externally loaded and html-docx-js does not apply any styles. Here is a simplified code sample: const html = &ap ...

javascripthtmlcssreactjsdocx

JavaScript - Placing Image Caption and Details within a Box

<div id="CollectionALL"> <div id="collection1" class="col"> <img id="Img1" class="imageCS"/> <H1 id="Title1"></H1> ...

javascripthtmlcss

struggling to browse through HTML files in eclipse while utilizing the Tomcat server

Using Eclipse Juno with Tomcat 7, I created a java dynamic web project and added a folder named home in the WebContent directory. Inside this folder, I included files address.jsp and h1.html. I wanted to link h1.html from address.jsp. The code I used was ...

htmleclipsejsptomcat

Implementing Pagination or Infinite Scroll to Instagram Feed

Currently, I am working on creating an Instagram feed for a fashion campaign where users can hashtag their photos with a specific tag. Using the Instagram API, the script will pull all recent posts with this common tag to display on the webpage. Instagram ...

javascripthtmlajaxpaginationinstagram

Is there a way for me to send a form containing pre-existing data from a different page?

Seeking advice: I realize that utilizing jQuery's ajax function may be the simplest approach, however I am facing an issue with the form field names. The var_dump below displays the typical values submitted by the form using test data. It appears that ...

javascriptphphtmlforms

Steps to alter background image and adjust its height upon function activation

I am working on a search page with an advanced search option that only certain users can access. I need the height of my div to increase accordingly and also change the background image to a larger size when the advanced search is selected. How can I make ...

htmlcssangularjs

Having trouble with jQuery hover and AJAX loaded content not functioning properly?

When I receive content through AJAX, it looks like this: <div class="message" id="1"> blah <div class="details" id="1" style="float: left; display: none;">hidden information</div> <div class="spacer" style="clear: both;"&g ...

jqueryhtmlajax

Interference in the output of .innerHTML leads to disruption

I have been working on a feature to display a calculated price based on the selected quantity for each individual product. I attempted to duplicate the code and modify variable names, but encountered issues with the increase/decrease buttons triggering mul ...

javascriptjqueryhtmlcss

Loop through the <li> elements and use jQuery to update the text

Check out this HTML setup: <div class="mydiv"> <ul> <li>Text 1</li> <li>Text 2</li> </ul> <ul> <li>Text 3</li> <li>Text 4</li> </ul> <ul> < ...

jqueryhtmlreplaceiterated-function

What is the best way to adjust the width of a navbar using JavaScript?

I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript. Now, I want to dynamically adjust the width of the menu for differe ...

javascripthtmlcss

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

javascripthtmlcssrshiny

Is there a way to have the headline gently fade in and subtly rise when the page loads using CSS?

Is it possible to make the headline fade in and move up slightly on the home page using CSS after the user lands on the website? For a visual reference, check out this example on . I know it can be achieved with translateY, but I have never tried it before ...

javascriptjqueryhtmlcss

What is the best way to open a link contained within a div by clicking on it

I am currently in the process of developing a website that is able to parse a Spanish dictionary. When looking up the word HOLA, the site provides the definition. However, for other words like CASA, users receive suggestions with links such as My goal is ...

phphtmlparsingphp-parser

The size of the cursor varies depending on the line it's placed on

I have a content editable div where three lines are separated by BR tags. When I click on the second line, the cursor becomes bigger than that in the first line. .content { line-height: 35px; } <div class="content" contenteditable="true"> ...

javascriptjqueryhtmlcss

Using Angular's [ngIf], [ngIfElse], and [ngIfElseIf] functionalities enables dynamic content rendering

Currently, I have the following code snippet: <ng-container *ngIf="someCondition"> <ng-template [ngIf]="cd.typedType === 'first'" [ngIfElse]="Second"> <div class="row"> fir ...

htmlcssangulartypescriptng-template

Issues arise with Highcharts Sankey chart failing to display all data when the font size for the series is increased

I am currently working with a simple sankey chart in Highcharts. Everything is functioning correctly with the sample data I have implemented, except for one issue - when I increase the font size of the data labels, not all the data is displayed. The info ...

javascripthtmlhighcharts

Elements stacking up in succession

I am having issues with the alignment of my div elements, as they are either stacking behind or on top of each other. td { width: 14.28%; height: 16.6%; position: relative; } .details { position: absolute; display: none; ba ...

htmlcss

Can you explain the purpose of the animated class?

$('button').addClass('animated bounce'); $('.well').addClass('animated shake'); $('#target3').addClass('fadeOut'); Can you explain the purpo ...

htmljquerycssbootstrap-5

Arranging Bootstrap inputs horizontally with lengthy labels

When placing two input fields in a row, such as a drop down menu, with labels of varying lengths, the alignment of the inputs can become skewed. This issue persists even when attempting to add breaks in the code due to unpredictable wrapping behavior at di ...

htmlcsstwitter-bootstrapbootstrap-4alignment