CODEWITHSUNDEEP
htmlcss
Teratek
Teratek

Reputation: 55

Arrange a few divs

I have a few divs to arrange but im stuck. It should look like this

enter image description here

Im working on it for a couple of hours and it wont get better. Here is the code i wrote so far. I thinks there is an easy solution for a pro. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<style type="text/css">

 
#wrapper {
width: 600px;
margin: 0 auto;
}
 
#content_3 {
float: left;
background: #bbb;
width: 200px;
}
 
#content_2 {
float: left;
width: 200px;
background: #aaa;
}
 
 
#content_4 {
float: right;
width: 200px;
background: #ddd;
}
 
#content_1 {
float:left;
width: 400px;
margin: 0 auto;
background: #eee;
}

</style>
 
</head>
<body>
 
<div id="wrapper">
<div>
	 <div id="content_1">content_1</div>
     <div id="content_2">content_2</div>
     <div id="content_3">content_3</div>
</div>

     <div id="content_4">content_4</div>
</div>
 
</body>
</html>

Can someone help?

Wrapper

Both solution worked for me fine but the content of DIV 2 is increasing and so content 3 and 4 are moving down. How can i fix this? Conten_3 and 4 should stay right under content_1

Upvotes: 0

Views: 720

Answers (2)

user9108243
user9108243

Reputation:

Here's another alternative with CSS grid. Hope, it helps :)

We divide wrapper in 3 columns giving each column fraction 1. Then for each content we just mention the row and column and if we need to combine to rows or column we use span as shown.

Advantage: You don't need to worry about height and width, you can make use of fractions to divide them.

#wrapper {
  width: 600px;
  height: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#wrapper * {
  text-align: center;
}

#content_1 {
  grid-column: 1 / span 2;
  background: red;
}

#content_2 {
  background: #aaa;
  grid-column: 3;
  grid-row: 1 / span 2;
}

#content_3 {
  background: #bbb;
  grid-column: 1;
  grid-row: 2;
}

#content_4 {
  grid-column: 2;
  grid-row: 2;
  background: #ddd;
}
<div id="wrapper">
  <div id="content_1">content_1</div>
  <div id="content_2">content_2</div>
  <div id="content_3">content_3</div>
  <div id="content_4">content_4</div>
</div>

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 272648

I advice to go with flex, much easier :

You first divide the layout in 2 columns (div1,div2,div3 in the first and div4 in the second). Then in the first column you simply make the first div to be width:100% and use wrap to make the 2 remaining go to the next row.

body {
  margin: 0;
}

#wrapper {
  width: 600px;
  display: flex;
  height: 200px;
  margin: 0 auto;
}

.first {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
}

#content_1 {
  background: #bbb;
  width: 100%;
}

#content_2 {
  flex: 1;
  background: #aaa;
}

#content_4 {
  flex: 1;
  background: #ddd;
}

#content_3 {
  flex: 1;
  background: #eee;
}
<div id="wrapper">
  <div class="first">
    <div id="content_1">content_1</div>
    <div id="content_2">content_2</div>
    <div id="content_3">content_3</div>
  </div>
  <div id="content_4">content_4</div>
</div>

Upvotes: 6

Related Questions