CODEWITHSUNDEEP
htmlcss
pkSML
pkSML

Reputation: 255

DIVs don't line up

I have created a jsfiddle for you to see what I'm doing.

https://jsfiddle.net/pksml/3mp1Lnw8/5/

#page-wrapper {
margin-left: 205px;
background-color: green;
}

The menu wrapper (orange) and the page wrapper (green) should both be at the top of the content wrapper (blue). But the green block looks to have a top margin (which it doesn't).

My question is this: why don't the orange and green blocks both line up at the top of the blue block?

Is some of my CSS code wrong? Thanks for your input!

Upvotes: 4

Views: 116

Answers (6)

Craig Wayne
Craig Wayne

Reputation: 5068

http://codepen.io/craigiswayne/pen/mPxJqv

** Makes use of flex box **

CSS:

.block{
  width:100px;
  height:100px;
  background-color:#8BC34A;
}

.block.fill{
  background-color:#F44336;
  -webkit-flex: 1;
          flex: 1;
}

.container {
  display: -webkit-flex;
  display: flex;
  width:100%;
}

Upvotes: 1

Ahmed Alaa
Ahmed Alaa

Reputation: 124

you have two solutions,

  1. you can set the display property of the #page-wrapper to be display:inline-block
  2. if you don't want to change its display property for any reason so you can add float:left to the #page-wrapper as well

then no need for margin-left:205px in #page-wrapper

Upvotes: 1

Emmet Arries
Emmet Arries

Reputation: 549

I think the code below should work for you!

All I added was display: inline-block; to #menu-wrapper and #page-wrapper.

All I removed was the float: left; from #menu-wrapper and margin-left: 205; from #page-wrapper.

	HTML {
	  background: #cccccc;
	  box-sizing: border-box;
	}
	
	*,
	*:before,
	*:after {
	  box-sizing: inherit;
	}
	
	#bounding-wrapper {
	  min-width: 320px;
	  width: 100%;
	  padding: 10px;
	}
	
	#content-wrapper {
	  width: 100%;
	  margin: 0px;
	  padding: 0px;
	  overflow: auto;
	  height: auto !important;
	  background-color: blue;
	}
	
	#menu-wrapper {
	  width: 200px;
	  background-color: orange;
	  display: inline-block;
	}
	
	#page-wrapper {
	  background-color: green;
	  display: inline-block;
	}
<div id="bounding-wrapper">
  <div id="content-wrapper">
    <div id="menu-wrapper">
      this is in the menu wrapper
    </div>
    <!-- menu wrapper -->
    <div id="page-wrapper">
      <p>this is in the page wrapper</p>
    </div>
    <!-- page wrapper -->
  </div>
  <!-- content wrapper -->
</div>
<!-- bounding wrapper -->

Hope that helped!

Upvotes: 1

Zubair sadiq
Zubair sadiq

Reputation: 500

jsfiddle 

#page-wrapper {
   float:left;
   background-color: green;
}

use float:left instead of marigin left

Upvotes: 1

jgoley
jgoley

Reputation: 54

You need to float both menu-wrapper and page-wrapper.

Looks like from your addition of the right margin you are trying to position the left menu? If so you could do something like this: https://jsfiddle.net/jgoley/98abyyp2/

Upvotes: 1

Felix A J
Felix A J

Reputation: 6490

It is the default margin of p tag which is pushing the green div down.

HTML {
  background: #cccccc;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

#bounding-wrapper {
  min-width: 320px;
  width: 100%;
  padding: 10px;
}

#content-wrapper {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow: auto;
  height: auto !important;
  background-color: blue;
}

#menu-wrapper {
  width: 200px;
  background-color: orange;
  float: left;
}

#page-wrapper {
  margin-left: 205px;
  background-color: green;
}
  p{
margin: 0 0 20px;
  }
<div id="bounding-wrapper">
  <div id="content-wrapper">
<div id="menu-wrapper">
  this is in the menu wrapper
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolores voluptatibus itaque dolor quod.</p>
</div>
<!-- menu wrapper -->
<div id="page-wrapper">
  <p>this is in the page wrapper</p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum repellendus eum delectus deserunt molestiae cum, 
</div>
<!-- page wrapper -->
  </div>
  <!-- content wrapper -->
</div>
<!-- bounding wrapper -->

Upvotes: 1

Related Questions