Jump to content
Sign in to follow this  
ZorroX

html - custom divs structure

Recommended Posts

How do you create <body> code to set all div blocks like in this picture ? I'm specially curius about this blue block. How you put this on the right side of 5 green blocks ?

div.PNG

Edited by ZorroX

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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
Sign in to follow this  

×