|
CSS - Div Drops Down When It Contains <p>
I have some very simple code that has a <div> underneath a <table>. I want the DIV to be up against the bottom of the table with no space. It works fine until I add a <p> tag into the DIV. After doing this, the DIV moves down away from the table.
The DIV will contain all the page's content and will automatically adjust it's height to the content. Here's the HTML code (The DIV in question is the "main" DIV): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<center>
<img src="images/header/header1.jpg" alt="Header" width="795" height="170" />
<br />
<table class="headertable" width="795" cellspacing="0" cellpadding="5">
<tr>
<td class="headertd"><a href="1">Link 1</a></td>
<td class="headertd"><a href="2">Link 2</a></td>
<td class="headertd"><a href="3">Link 3</a></td>
<td class="headertd"><a href="4">Link 4</a></td>
<td class="headertd"><a href="5">Link 5</a></td>
<td><a href="6">Link 6</a></td>
</tr>
</table>
</center></div>
<center>
<div class="main">
<p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Main Content</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p>
</div>
</center>
<center>
<div class="footer">
<span style="float:left;margin-left:5px">Footer Text 1</span>
<span style="float:right;margin-right:5px">Footer Text 2</span></div>
</center>
</body>
</html>
Here's the CSS: Code: @charset "utf-8";
/* CSS Document */
body{
background-color:#E0A766;
}
/* Header Styles */
.header{
width:795px;
margin-left:auto;
margin-right:auto;
}
.headertable{
text-align:center;
border-right:solid 2px black;
border-left:solid 2px black;
border-bottom:solid 2px black;
background-color:#006600;
}
.headertable a:link{color:#FFFFFF; font-weight:bold; text-decoration:none;}
.headertable a:visited{color:#FFFFFF; font-weight:bold; text-decoration:none;}
.headertable a:hover{color:#FFFFFF; font-weight:bold; text-decoration:none; background-color:#048E04}
.headertd{
border-right:solid 2px black;
}
/* Main Content Styles */
.main{
width:791px;
padding-bottom:20px;
border-right:solid 2px black;
border-left:solid 2px black;
border-bottom:solid 2px black;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
}
/* Footer Styles */
.footer{
width:791px;
height:18px;
padding-top:2px;
padding-bottom:2px;
border-right:solid 2px black;
border-left:solid 2px black;
border-bottom:solid 2px black;
background-color:#006600;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font-family:"Times New Roman", Times, serif;
font-size:12px;
}
.footer a:link{color:#FFFFFF; font-weight:bold; text-decoration:underline;}
.footer a:visited{color:#FFFFFF; font-weight:bold; text-decoration:underline;}
.footer a:hover{color:#FFFFFF; font-weight:bold; text-decoration:underline; background-color:#048E04}
I know my code isn't up to current standards/trends (such as using a table for a navbar), but this was the easiest, fastest way to create the layout I wanted, so I would like to keep the current code. I just need to know if it's possible to have the DIV not drop down when it contains a <p> tag. If I take the <p> tag out of the "main" DIV, everything looks fine. Here are a couple screenshots: Here's what it's supposed to look like: http://img193.imageshack.us/img193/617/screen1d.jpg Here's what happens after adding the <p> tag: http://img193.imageshack.us/img193/8934/screen2a.jpg Similar TutorialsThere are two things I dont like in this world: 1. Internet Explorer 2. 1024x768 Anyway, I have a problem in IE. The problem is that a div is falling down below the other divs. It looks like this: http://files.upl.silentwhisper.net/...8/ieproblem.JPG Works in FF (of course, hehe). Any idea what this might be or any solution? Code:
#box1
{
border-right: 1px solid #a0a0a5;
border-bottom: 1px solid #a0a0a5;
background-color: white;
width: 680px;
height: 440px;
text-align: left;
color: #5b626e;
padding: 15px;
margin-left: 182px;
overflow: auto;
position: absolute;
}
#box1 a:link, #box1 a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0b1a48;
text-decoration: underline;
}
* html #box1 {
float:left;
}
Thats the CSS for the div falling down. Image example here. Text different behavior Why is is that the text drops down in different area of the div. The div is set a specific size but the text drops down where ever it wants. I have not added ant <br> tags just srtaight text and it still drops down where ever. Why does the text not go all the way to the end of the div anyway? Hi Folks [I don't think my last attempt went through - I made a mistake], I have a page here with a problem that's occupied me for over a day. I can't get my non-floated 'DIV#left' to sit beside my floated 'DIV#right'. The DIV#left containing the subnav slips, or is forced down the page; http://johniwhite.com/tests/ireland/level_2.html I'd love to hear the easy answer! Here's the CSS: div#left_level2 { width: 130px; height: 50px; vertical-align: top; padding: 0; margin: 0px; /* display: inline;*/ /* border: 1px solid #0F0;*/ } div#right_level2 { float: right; width: 594px; height: 50px; padding: 0 0 0 0; margin-top: 0px; margin-right: 0px; vertical-align: top; } ---- The code for a more simple version at http://johniwhite.com/tests/ireland/2_col_test.htm <div id="middle"> <div id="right_level2"><!--the floated div for content--></div> <div id="left_level2"><!--the non-floated div for subnav--></div> </div> ---------- Love to hear thoughts, thanks John Hey all, I have been working on a site in CSS which looks pretty much how we want it to look in FF, however IE is giving me all sorts of problems. If you look at the following page http://www.mobileshop.com/3phones.com/viewphone.php in firefox you can see that the middle (white) column rests nicely between the two side columns, however, if you change to IE and look at the very same page then the middle column drops below the left side column. This is my first time at a css design and i cant work out why it is doing it, also the main logo is supposed to be centered, in IE it is left aligned. If you are viewing the source, you will see a tag soup of tables in the middle of the nice CSS, this is due to the fact that we pick up a feed and it dumps the data into our page. This will change to be pure CSS but i am running out of time to get the site launched first. One final question, i downloaded the Tidy HTML validator for firefox. I managed to get my pages passed the W3c online checker, but tidy claimed there was still errors. I went through and fixed all them to get a happy green tick but then when going back to W3C validation some things failed. I was under the impression that Tidy was developed by W3C, so why do they give varying results regarding validation? Thank you for your time. I'm having a problem in IE6 when I make the browser window narrow so that all the images cannot fit horizontally. The page is at: URL In other browsers Firefox win/mac, Safari, things work ok if I make the browser window narrow so that some of the images in the right section (#section1) will not fit. The images get clipped and a horizontal scroller appears. But in IE6/Win, the whole table of images gets dropped down. I thought the issue was related to: Internet Explorer and the Expanding Box Problem URL But trying overflow:hidden; in #section1 did not help. Any help would be greatly appreciated. Thanks- YamaMon |
|||||||