Css: How to Get Two Floating Divs Inside Another Div

CSS: how to get two floating divs inside another div

your margin-left of #content should include the width of #left_menu. Thus should be

#content {
    margin-left: 170px;
    /* float: right; */ /* no need for a float here */
    border: 1px solid white;
}

You also don't need a position:absolute for your #main (unless other purposes)

So finally:

<style type="text/css"><!--
#main {
    margin-left: 30px;
    margin-top: 20px;
}

#left_menu {
    width: 150px;
    float: left;
}

#content {
    margin-left: 170px;
    border: 1px solid white;
}
.c{clear:both;}
--></style>
    <div id="main">
    <div id="left_menu>&blablabal</div>
    <div id="content">blablb</div>
    </div>
    <div class="c"></div>

.c is to clear and pushes the bottom content off the floats.

how to make a div to wrap two float divs inside?

It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.

<div style="display: block; clear: both;"></div>

It should force the container to be the correct height.

How to float left two divs such that the second div, which contains other divs, resizes correctly

If you don't want to use flexbox yet, try this.
Just use position: absolute; instead of float to both containers.

@charset "utf-8";.container {  display: inline-block;  position: absolute;  border: solid;  margin: 0 10px 10px 125px;  overflow: auto;  max-width: 550px;  width: auto;  background-color: green;}
.menu {  display: inline-block;  position: absolute;  border: dashed;  border-color: blue;  text-align: left;  padding: 10px;}
.box {  display: inline-block;  float: left;  margin: 20px;  padding: 10px;  width: 70px;  height: 50px;  border: solid;  background-color: white;}

<div class="menu">  Menu  <ul>    <li>Link A</li>    <li>Link B</li>  </ul></div><div class="container">  <div class="box"> Text1 </div>  <div class="box"> Text2 </div>  <div class="box"> Text3 </div>  <div class="box"> Text4 </div>  <div class="box"> Text5 </div>  <div class="box"> Text6 </div>  <div class="box"> Text7 </div>  <div class="box"> Text8 </div></div>

Two divs side by side inside another div

Here is the solution..

.body-content {    width: 100%;    padding-left: 15px;    padding-right: 15px;  float:left;}
.left-menu {    background-color: red;    float: left;    width: 50px;}
.right-container {    background-color: blue;    width:calc(100% - 50px);  float:left;}
.middle-view {    width: 70%;    float: left;    background-color: blueviolet;}
.right-view {    width: 30%;    float: left;    background-color: burlywood;}

<div class="body-content">  <div class="left-menu">    abc  </div>  <div class="right-container">    <div class="middle-view">      def    </div>    <div class="right-view">      ghi    </div>  </div></div>

Centering floating divs within another div

First, remove the float attribute on the inner divs. Then, put text-align: center on the main outer div. And for the inner divs,
use display: inline-block. Might also be wise to give them explicit widths too.

---

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>

Cannot get 2 divs side by side inside another div

You need to float both divs, and then in div#a you need to subtract the width of the border:

<div id="a" style="width: 198px; height: 100%; border: 1px solid blue; float:left;"></div>

<div id="b" style="width: 597px; height: 100%; border: 1px solid red; float: right;"></div>

placing a div inside another div keeping spaces between the two divs

You need to set the padding properties for the #content div instead of the #main_content div.

#content {
    padding: 10px 10px 10px 10px;
    background-color: red;
}

#main_content {
    background-color: #8BC735;
}

---

Related Topics