CODEWITHSUNDEEP
htmlcss
Micard
Micard

Reputation: 389

Layout of 3 DIVs, where 2 are in one column

I am trying to make something like this:

|--------------------------------------------------------|-------------|
|                                                        |             |
|                    DIV 1                               |             |
|                                                        |    DIV 3    |
|--------------------------------------------------------|             |
|                    DIV 2                               |             |
|--------------------------------------------------------|-------------|

I can't use a table for this. And I don't know if there's a way to just let them stack like that?

I tried it with the code below, but DIV 3 is not all the way at the top. It is actually exactly div2.height lower from the top.

#DIV_1 {
  height: 125px;
  width: 80%;
  display: block;
  float: left;
}
#DIV_2 {
  width: 80%;
  height: 15px;
  display: block;
}
#DIV_3 {
  display: block;
  float: left;
  height: 140px;
  width: 20%;
}
<div class="row" style="width: 1024px; height: 140px;">
  <div>
    <div id="DIV_1"></div>
    <div id="DIV_2"></div>
  </div>
  <div id="DIV_3">
  </div>
</div>

Upvotes: 9

Views: 2815

Answers (7)

stevanpopo
stevanpopo

Reputation: 435

This can also be achieved using pure CSS with CSS Grid.

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
<main>
  <div class="col-1">
    <div class="row-1">
      row 1
    </div>
    <div class="row-2">
      row 2
    </div>
  </div> 
  <div class="col-2">
    column 2
  </div>
</main>

The benefit I find of using CSS grid is that it takes very few CSS rules if your HTML is defined well.

CSS Tricks has an in-depth Guide to CSS Grid which includes browser support information (now implemented in most modern browsers).

Upvotes: 0

Cave Johnson
Cave Johnson

Reputation: 6778

Try this. I removed float and width from DIV_1 and DIV_2 and put it on the parent.

#DIV_0 {
  width: 80%;
  float: left;
}

#DIV_1 {
  height: 125px;
}

#DIV_2 {
  height: 15px;
}

#DIV_3 {
  float: left;
  height: 140px;
  width: 20%;
}
<div class="row" style="width: 1024px; height: 140px;">

  <div id="DIV_0">
    <div id="DIV_1">div1</div>
    <div id="DIV_2">div2</div>
  </div>

  <div id="DIV_3">
    div3
  </div>

</div>

Upvotes: 6

Michael Benjamin
Michael Benjamin

Reputation: 371231

The layout is relatively simple with CSS flexbox:

.row {
    display: flex;                 /* establish flex container */
    height: 140px;                 /* height from original code */
    width: 1024px;                 /* width from original code */
}

.row > div:first-child {
    flex: 0 0 80%;                 /* width from original code */
    display: flex;
    flex-direction: column;        /* stack first div children vertically */
}

.row > div:first-child > div {
    flex: 1;                       /* items in first div distribute space equally */
    border: 1px dashed black; 
}

.row > div:last-child {
  flex: 0 0 20%;
  border: 1px dashed black;
}
<div class="row">
    <div>
        <div id="DIV_1">DIV #1</div>
        <div id="DIV_2">DIV #2</div>
    </div>
    <div id="DIV_3">DIV #3</div>
</div>

Benefits of flexbox:

  1. minimal code; very efficient
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. it's responsive
  6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

Browser support:

Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

Upvotes: 10

nmg49
nmg49

Reputation: 1386

I would highly recommend using Bootstrap Grid.

Something like this:

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">DIV 1</div>
      <div class="row">DIV 2</div>
    </div>
    <div class="col-md-4>DIV 3</div>
  </div>
</div>

Upvotes: 4

Afzal Ashraf
Afzal Ashraf

Reputation: 57

Try this one: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #one img, #two img{width: 300px;
                        height: 300px;}

        #three img{height: 600px;
                width: 600px;}

        div#onetwo, div#three{display: inline-block;}

    </style>

</head>
<body>

    <div id="onetwo">
        <div id="one"><img src="image1.jpg" alt=""></div>
        <div id="two"><img src="image2.jpg" alt=""></div>

     </div>

     <div id="three"><img src="image3.png" alt=""></div>
</body>
</html>

or use bootstrap

Upvotes: 1

H. Jabi
H. Jabi

Reputation: 171

Do not use floating with #DIV_1. Instead use float: left, width: 80% with the parent of #DIV_1.

Upvotes: 4

Derick Alangi
Derick Alangi

Reputation: 1100

You can accomplish this with twitter's bootstrap. Link to the bootstrap online: 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Then you can use the below code to accomplish that: 

<div class="row">

    <div class="col-lg-8">           
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="col-lg-4"></div>

 </div>

Upvotes: 2

Related Questions