positing the div in between 2 divs

**svibuk** · Jun 9, 2011 22:42

ina web page layout using css i have a div for header & footer which extends the full width of the web browser
in between this 2 i want a div which wuld also extend the full width of teh web page
& footer wuld come below & shld start from excatly below of the header
now when i palc ethe div footer comes on top of the centre div

**Paul O'B** · Jun 10, 2011 05:27

Hi,

You'll need to post your html and css so that we can see where you are going wrong. To do what you want needs no special rules and would happen automatically.

e.g.

Code:

<div id="header"><h1>Header</h1></div>
<div id="content"><h2>Content</h2></div>
<div id="footer"><p>Footer</p></div>

No CSS needed so far and would do what you ask for.

If you are using absolute positioning to place your elements then that is the wrong approach.

Post an example of what you are doing.

**svibuk** · Jun 11, 2011 00:40

<div id="main1">
<div id="header2">
<div id="logo2">
<p><h2>title</h2></p>
</div>
<div id="menu">
<ul>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Products</a></li>
<li><a href="#" title=""> Our plan </a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
</div>

----------- here i need div for content=--------------------------

<div id="footer">
<p>Copyright © 2011.<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>

--- css

#main1
{

background-repeat: no-repeat;
background-image: url(images/headerimg.jpg);
/*width: 997px;*/
height: 150px;
background-color: black;
}

#logo2 {
padding-left: 200px;
width: 635px;
padding-top: 30px;
height: 30px;
}

#header2
{/*
width: 778px;
height: 284px;*/

}

#footer
{
clear: both;
height: 36px;
padding: 15px 0;
background-color:Black;
background-repeat: no-repeat;
background-image: url(images/footer.jpg);
border-top: 5px solid #5592C6;
text-align: center;
}

**PatrickSamphire** · Jun 11, 2011 07:16

You'd probably find things a bit easier if you stripped out some of those unnecessary divs. You don't need the logo2 and menu divs, as far as I can see.

From your HTML, you've also failed to close one of the divs. (Count them...)

I'm not totally sure what you're having a problem with. All you need to do, surely, is put a div in the place you've shown:

<div id="content">
[The actual content goes here]
</div>

(The id="content" isn't actually necessary, but I've put it there for reference.)

It would help to see a mock-up of what you expect the page to look like, because the CSS is a bit inconsistent (you've commented out some declarations that conflict, but I don't know if you mean to delete those or include them).

Show us a mock-up, and I suspect the CSS will be fairly easy.

**ralph.m** · Jun 11, 2011 07:42

You missed a closing div at the end, but otherwise, this should look fine. Because you have the color black on the #main div, that may be tricking you. If you want a black bg, better to put it on the body. Here is a slightly tidied version of your code. Save it in a .html file and open it in your browser.

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
html, body, div,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img,
form, fieldset, legend, label, textarea, 
span, em, strong, sub, sup, cite,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    vertical-align: bottom;
}

#main1 {
background-repeat: no-repeat;
background-image: url(images/headerimg.jpg);
background-color: black;
}

#logo2 {
padding-left: 200px;
width: 635px;
padding-top: 30px;
height: 30px;
}

#header2 {overflow: hidden;}

#content {background: white;}

#footer {
clear: both;
height: 36px;
padding: 15px 0;
background-color:Black;
background-repeat: no-repeat;
background-image: url(images/footer.jpg);
border-top: 5px solid #5592C6;
text-align: center;
}
</style>
	
</head>

<body>
<div id="main1">
  <div id="header2">
    <div id="logo2">
      <p><h2>title</h2></p>
    </div>
    <div id="menu">
      <ul>
      <li><a href="#" title="">Home</a></li>
      <li><a href="#" title="">Products</a></li>
      <li><a href="#" title=""> Our plan </a></li>
      <li><a href="#" title="">About</a></li>
      <li><a href="#" title="">Contact</a></li>
      </ul>
    </div>
  </div>

  <div id="content">
    <p>This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. </p>

    <p>This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. This is the content section. </p>
  </div>

  <div id="footer">
    <p>Copyright &copy; 2011.<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
  </div>
</div>
</body>
</html>

**Paul O'B** · Jun 12, 2011 09:16

Ralph missed this bit

Code:

<p><h2>title</h2></p>

You can't put an h2 inside a paragraph. Headings and paragraphs can only contain inline elements.

Get rid of the P element that's around the h2.

Code:

<h2>title</h2>

**svibuk** · Jun 13, 2011 02:00

hi

attached teh screenshot of how it appears. hope u can get a clear idea now

**Stomme poes** · Jun 13, 2011 02:14

Originally Posted by svibuk

in between this 2 i want a div which wuld also extend the full width of teh web page

Svibuk prolly wants a 100% high page with a sticky footer.

**Paul O'B** · Jun 13, 2011 02:20

Originally Posted by svibuk

hi

attached teh screenshot of how it appears. hope u can get a clear idea now

The screenshot you posted is not the result of the code you have given us so far. Check out Ralph's code above and you will see there is no overlap with the footer. It looks to me as though you are absolutely placing the footer but the code you have given us doesn't show this to be true. Or you could have some missing divs in there corrupting the layout so validate your code first.

If you are looking for a sticky footer as Stomme suggested then check her link out in the previous post.

Do you have a live link that we can look at and then we can solve this in minutes for you

**svibuk** · Jun 13, 2011 02:37

attached the html screenshot

**ralph.m** · Jun 13, 2011 05:47

Rather than post a picture of code, post the real code. Also, make sure first to remove anything like ASP code that will be removed from the page on the server. (Keep it to the HTML that the browser will see.) And you still haven't shown us the CSS you are using, which is critical to the question.

**Paul O'B** · Jun 13, 2011 09:06

You've set a height for #main1 of 150px:

Code:

#main1 {
    background-repeat: no-repeat;
    background-image: url(images/headerimg.jpg);
    /*width: 997px;*/
height: 150px;
    background-color: blue;
}

As #main1 holds your header and content then any content in excess of 150px will be ignored as though it doesn't exist.

Remove the height from #main1.

User Tag List

Thread: positing the div in between 2 divs

Thread Tools

Display

positing the div in between 2 divs

Bookmarks

Bookmarks

Posting Permissions