Jump to content

html - custom divs structure


ZorroX
 Share

Recommended Posts

Wrap all the green blocks in a single container, give a left margin to the blue box equal to the width of that container. It's better not to use <div> elements when there are elements that better describe the contents, for example the red area could be a <header> element.

The HTML might look something like this:

<header class="site-header">Red block</header>
<div class="sidebar">
  <div>Green block</div>
  <div>Green block</div>
  <div>Green block</div>
  <div>Green block</div>
  <div>Green block</div>
</div>
<main>
  Blue block
</main>

The CSS to achieve the layout would be this:

.sidebar {
  float: left;
  width: 30%;
}
main {
  margin-left: 30%;
}

If you want an element below the green and blue boxes, you should give "clear: both" to its CSS to force it below the green area.

If the green and blue regions both need to be the same height, you could use a flex-box, but that is a  bit more complicated to set up.

  • Thanks 1
Link to comment
Share on other sites

First of all, create the div on the top. 

<div class="red-div"></div>

It'll take up the entire width automatically so you only need to add the background and height.

.red-div{

background: red;

height: 200px;

}

Then,you can divide the remaining blocks into two main sections. One on the left and one on the right.

<div class="left-section"></div>

<div class="right-section"></div>

Add css property width around 30% and float left for the left div as shown below.

.left-div{

width: 30%;

float: left;

height: 600px;

border: 1px solid grey;

}

Add the remaining width 70% and float property for the right div as shown below. Here, you can use either float left or right as both will produce the same result as there's no spacing between them.

.right-div{

width: 70%;

float: left;

background: blue;

height: 600px;

border: 1px solid grey;

}

Now, create multiple divs inside the left div with height, background and border defined and you'll get the desired result.

<div class="left-div">

     <div class="content"></div>

     <div class="content"></div>

     <div class="content"></div>

     <div class="content"></div>

     <div class="content"></div>

</div>

.content{

height: 100px;

background: green;

border-bottom: 1px solid grey;

}

 

Edited by Ingolme
Advertising
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...