CODEWITHSUNDEEP
csshtmlcss-position
Eamonn
Eamonn

Reputation: 1

How to deal with DIV tags after an div tag that is position absolute?

I have set a div named header as Absolute so that it is flush to the window.

I then have a content div tag with no position set both are contained in a wrapper div tag

I have set the content div tag to have padding of 100px from top so that contents are not obliterated by the header.

Is there any other way of moving the content under the absolutely positioned header with out the need to use padding or margins?

<div id="wrapper">
    <div id="header">
      <div id="indent">content of header</div>
    </div>

<div id="content">content of page</div>  

</div>

CSS

#wrapper {
background-color: #FFF;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 100px;
padding-left: 5px;
clear: both;}

#header {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
right: 0px;
background-color: #FFF;}

#indent {
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}
#content {
clear: both;
padding-top: 100px;}

Upvotes: 0

Views: 438

Answers (5)

user2579058
user2579058

Reputation:

As a general rule when you have floated content inside an container, the containing container collapses to it;s minimum height and width, depending on your CSS master rules and the type of container, block, inline-block.

In this cases always add a clear property to one container right after the floated content so it won't break your other content.

<div id="wrapper">
    <div id="header">
      <div id="indent">content of header</div>
    </div>

    <div class="clear=box"></div>

    <div id="content">content of page</div>  
</div>

#wrapper { position:relative; }
#header {
  position:absolute;
  clear:both; /* add this to clear your content */
}
#content { clear:both; /* in case clear:both from above not working */ }
#clear-box { clear:both; /* a container dedicated to clear contentfloat */ }

Some times you can add one dedicated div to clear floating from previous contents. Be reserved with positioning absolutely. Use default elements behavior unless there is no other way and you're forced to use position:absolute.

Let me know if works for you :)

Upvotes: 0

Doge
Doge

Reputation: 345

From what I can understand, you will want to use relative positioning, not absolute positioning. If you could make the question easier to understand, I could maybe have a better answer.

Upvotes: 0

SW4
SW4

Reputation: 71140

Having looked at your code, the below will achieve the same effect, unless there is additional content you arent mentioning. I see your use of clear it would help to also let us know if there are other elements present which may interact with the code you posted.

#wrapper {
    background-color: #FFF;
    padding: 0px 5px 100px 5px;
}

#header {
    background-color: red;
    text-align:center;
}

#indent {
    display:inline-block;
    text-align:left;
    /* width : xx */
    margin 0 auto;
}

Upvotes: 0

J2D8T
J2D8T

Reputation: 825

You would have to set a top margin for the content div, because when you set the header div's position to absolute the following div's will ignore the height of the header div. So the header div height property would have to be static as well.

You could also just set the html body elements margin and padding to 0px and remove the absolute positioning from the header tag, that would also let the header div sit flush with the window.

Upvotes: 0

sHentschel
sHentschel

Reputation: 155

You could use the "top" attribute:

e.g.

.absolute {
    position: absolute;
    height:20px;
    width: 20px;
    background-color: #FF00FF;
}
.relative {
    position: relative;
    top:20px;
    height:20px;
    width: 20px;
    background-color: green;
}

See this fiddle

Upvotes: 1

Related Questions