CODEWITHSUNDEEP
javascriptcss
salvabalza
salvabalza

Reputation: 173

div always sticking to the left border of the page

I've got a <div id="mydiv"> with margin-left: 0px. But sometimes (the page is dynamically generated) that this <div> is placed within another <div> that has a positive margin-left value. This way #mydiv will have the margin of the container and not 0.

Is there a way to set

margin-left: 0px (relative to the body margin)

or

margin-left: -(sum of container margins)?

Upvotes: 0

Views: 1541

Answers (5)

yahya el fakir
yahya el fakir

Reputation: 562

use:

.mydiv{
  position: absolute;
  left : 0;
}

By using an absolute position and setting left to 0 your div will always be aligned with the left side of the containing element with no margin.

Upvotes: 1

Dhaval Solanki
Dhaval Solanki

Reputation: 99

You can achieve it with positions like relative and absolute. You just need one top parent above all div. I have created following example. It will help you to achieve what you need.

[Example](http://jsfiddle.net/dhavalsolanki/tjv5e1tn/)

Upvotes: 0

Ahmad Abdelghany
Ahmad Abdelghany

Reputation: 13248

The main point is positioning:

position: fixed; will position the div relative to the browser window
position: relative; will position it relative to its normal position
position: absolute; will position it relative to the first parent element that has a position other than static (so it is not really absolute after all)

check http://www.w3schools.com/css/css_positioning.asp

Upvotes: 0

stanze
stanze

Reputation: 2480

Use CSS positioning property and align the div's respectively.

For Example

You have a <div class="wrapper"> style this with position:relative

And for the inside <div class="mydiv"> style with position: absolute; left: 0; or left: 50%.

Upvotes: 0

gitaarik
gitaarik

Reputation: 46370

If your div is inside another one, the boundaries for that div are limited to it's container div.

You can break out of it by putting position: absolute; on the div you want to position differently. Then you should put a position: relative; on the container it should be relatively positioned to. Then you can use a negative margin-left.

Upvotes: 1

Related Questions