|
CSS - Positioning Puzzle (divs, Floats, And Display:table Oh My!)
I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES!
here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. Similar TutorialsI'm trying to vertically align two divs inside a table cell. I have the cell's vertical-align property set to text-top because I want the first div to be aligned at the top of the td but I can't, no matter what I try, get the second div to align to the bottom. Is there a better way to accomplish this without nesting tables or is this the right way and I'm just missing something? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm I'm having some issues with my images showing up properly in IE6. They look fine in Safari & Firefox. Basically there is a container div and then individual divs that display an album cover along with a description. In IE6, the images aren't in the divs, but are at the top. Anyone know what the fix is? #container { padding: 0px; margin-top: 10px; margin-bottom: 20px; margin-right: auto; margin-left: auto; background: #333; border: 0px; text-align:center; width: 635px; } #center { padding: 10px; margin-top: 10px; margin-bottom: 0px; margin-right: auto; margin-left: auto; background: #666; border: 2px solid #000000; text-align:left; width: 610px; } #container p.album-cover { float:left; padding:0; margin-top: 0px; margin-bottom: 0px; margin-right: 10px; margin-left: 0px; } #container .album-info { ... just font properties; } Code:
<?php loop through albums to display each one; ?>
<div id="center">
<p class="album-cover">
<?php <a href="..."><img src="..." ></a> ?>
</p>
<p class="album-info">
<?php ..description... ?>
</p>
</div>
?>
I thought I'd got this CSS stuff figured out but now I'm stuck again. I want the last div on this page to be alongside the one above it, but can I get the b****** thing to go there? No! Link I just want them side-by-side with a nice centered gap between them. Can you help? Thanks, John. I swear that I really am learning a great deal about CSS but you wouldn't think so as many threads as I've started in the past few days... Anyhow, consider the following code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #00ff00; } /* end #base */
#main {
background: #0000ff;
margin: auto;
text-align: left;
width: 800px; } /* end #main*/
#content {
background: #ffffff;
border-left: 1px solid #0000ff;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #0000ff; } /* end #content */
#bottom_part {
padding: 0;
line-height: 130%;
padding-left: 1em;
padding-right: 1em;
display: block;
margin: 0;
border: 0;
clear: both; } /* end #bottom_part */
#column_a {
padding: 1em;
margin: 0;
float: left;
width: 33%; } /* end #column_a */
#column_b {
margin-left: 33%;
margin-right: 33%;
padding: 1em;
padding-right: 0;
width: 25%; } /* end #column_b */
#column_c {
display: block;
float: right;
padding: 1em;
width: 33%; } /* end #column_c */
#bottom {
background: #ff0000;
border: none; } /* end #bottom */
.header { font-weight: bold; }
</style>
</head>
<body>
<div id="base">
<div id="main">
<div id="content">
<div id="bottom_part">
<div id="column_a">
<p class="header">Column A</p>
<p>A - A</p>
<p>A - B</p>
<p>A - C</p>
</div>
<div id="column_c">
<p class="header">Column C</p>
<p>C - A</p>
<p>C - B</p>
<p>C - C</p>
<p>C - D</p>
<p>C - E</p>
<p>C - F</p>
</div>
<div id="column_b">
<p class="header">Column B</p>
<p>B - A</p>
<p>B - B</p>
<p>B - C</p>
</div>
</div>
</div>
<div id="bottom"> </div>
</div>
</div>
</body>
</html>
The problem is that the content in Column C does not completely render inside the white box. The same problem occurs when the content is really long in Column A. Column B will extend the height of the white box and I'm certain it is because there is no float style associated with it. How can I achieve this for the other two columns? Removing the floats will do the trick but will also place the columns on top of each other. http://62.190.48.108/intertest/news.php Basically, I want to sort out the header on the box just below the filter button. I want to get the date to stop where it is now, move where it says test to the center of the bar, and the print floated item to the far right. I am floating three elements id's .news_date, .news_headline and .news_print, but .news_print squashes .news_headline down, and I cant seem to change the width (The element needs to only be as big as the workd PRINT). Any ideas Thanks in advance. Joel Hi all, This is really annoying me and I don't think it should happen!! If you see this page, you will see one of the divs spans the whole page and it has gone behine the floated left element. Now if it wnt below it that would be OK as a block level element, but the content is in the right place. If you reduce the width it sits in its place OK. I think this is strange behavior.... is it correct????? http://www.wellandpower.net/website...req=www_contact Regards Charlie Hi all, I'm a beginner to floating divs etc. so I've been following a tutorial to get what I need and I'm tweaking it here and there. Trouble is I've obviously tweaked something incorrectly. The two column's in the contentHoldingDiv don't line up correctly. Does anyone feel like taking a look at my code and telling me what I've done wrong (any other comments freely welcomed - it's the only way I'll learn). Here's the HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="holdingDiv">
<div id="topDiv"><p>You are logged in as <strong>Guest</strong></p></div>
<div id="headerPicDiv">Header Pic</div>
<div id="navDiv">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="contentHoldingDiv">
<div id="contentDiv">
<h2>Column 1</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="rightDiv">
<h3>Column 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
</div>
<div id="footerDiv">
<p>
Site design by <a href="mailto:Lee@LTheobald.co.uk">Lee Theobald</a>
</p>
</div>
</div>
</body>
</html>
And here's the CSS Code:
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #E6E6E6;
margin: 0px;
padding: 0px;
min-width: 760px;
}
#holdingDiv {
background-color: #F8F8F8;
margin: 20px auto;
width: 760px;
}
#topDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
}
#topDiv p, #topDiv strong {
line-height: 25px;
text-align: right;
padding-right: 5px;
margin: 0px;
font-size: 10px;
}
#headerPicDiv {
height: 125px;
border: 1px solid #D4D4D4;
}
#navDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
line-height: 25px;
padding: 0 5px;
}
#navDiv ul {
margin: 0px;
padding: 0px;
}
#navDiv li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#contentHoldingDiv {
border: 1px solid #D4D4D4;
padding: 0px;
margin: 0px;
clear: both;
}
#contentDiv {
background-color: red;
width: 600px;
float: left;
}
#contentDiv p {
padding: 5px 3px;
margin: 0px;
#rightDiv {
background-color: orange;
width:157px;
margin-left:600px;
}
html>body #rightDiv {
width:160px;
}
#footerDiv {
height: 15px;
background-image: url(images/gradient15.jpg);
border: 1px solid #D4D4D4;
}
#footerDiv p, #footerDiv a {
line-height: 15px;
text-align: center;
font-size: 9px;
margin: 0px;
}
Cheers, Lee Hi Guys, Basically, I have Text in a content box, all fine and dandy, this content box has a fixed width and an expanding height depending on supplied content. I now need 2 further divs, one of which floats to the right, and positioned at the top of this content div, the other also floats right but needs to be alligned bottom. Ive tried absolutes with content being relative but although this does solve the positioning problem, obviously the content text will not wrap around the divs. ------------| ------------| ------------|_______| --------------------------- ------------------ ---------------------- ---------------------------- ------------------------ -----------| -----------| -----------| -----------|_______________| Basicaally like above (sorry, cant screenshot the project im working on :]) Code: <div style="width:591px; position:relative; z-index:1;"> <div style="width:150px; height:100px; float:right;"> ZZZZZZZZZZZ </div> <div style="width:150px; height:100px; float:right;"> ZZZZZZZZZZZ </div> <div style="width:291px; height:100px; float:left;"> asfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj k </div> <div class="clear"></div> </div> Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another. However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option. Here is my example; Code:
<html>
<head>
<style>
.main {
margin: 0px auto;
width: 800px;
border: 2px solid red;
}
.wrap:after{
content: ".";
display: block;
position:relative;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .wrap{height: 1%;}
div.wrap{display: block;}
/* End hide from IE-mac */
.left {
float: left;
width: 100px;
}
.right {
float: left;
width: 680px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
<div class="right">My Right div has only one line but need border till down there ...</div>
</div>
</div>
</body>
</html>
As you can see in the example the border of the right div does not go down till the bottom border of the main div. Hey, I got a webpage that looks like it should in both IE 6.0 and firefox 2.0. Now i went testing it in opera and it has a problem with some div positions. Here is how it looks in firefox and IE: Internet explorer:http://img442.imageshack.us/img442/8176/iexz2.jpg firefox:http://img361.imageshack.us/img361/5503/firefoxqc0.jpg And this is how it looks in Opera 9.10:http://img442.imageshack.us/img442/5125/operauw7.jpg The buttons signout, new contact and contact list are shifted to the low. I use this code on every page do display the header with the buttons ( the red part is the div with the buttons in it. Code:
<body>
<div class="containingTitles">
<div class="titleNavDiv">
<b>Hello, stefan.</b>
</div>
<div class="titleContentDiv">
<form action="search_contact.php" name="search" id="search" method="get">
<div style="float: left; width: 35%; margin: 0%; padding: 0%;">
<input type="text" style="width: 50%" name="sq" value="" id="sq">
<input type="submit" name="s" value="Search" id="s">
</div>
</form>
<form name="new_contact" id="new_contact" method="get" action="new_contact.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="nc" value="New Contact" id="nc">
</div>
</form>
<form name="contact_list" id="contact_list" method="get" action="contact_list.php">
<div style="float: left; width: 22%; margin: 0%; padding: 0%;">
<input type="submit" name="cl" value="Contact List" id="cl">
</div>
</form>
<form name="logout" id="logout" method="get" action="logout.php">
<div style="float: left; width: 20%; margin: 0%; padding: 0%; text-align: right;">
<input type="submit" name="lo" id="lo" value="Sign out">
</div>
</form>
</div>
</div>
<div class="navigationDiv">
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username1</a></div>
<div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username2</a></div>
<div class="selectedContact"><a href="contact_info.php?contact_id=102">Username3</a></div>
etc.
</div>
<div class="contentDiv">
----- contents of the page -----
</div>
</div>
And belowis the css code i use to float the divs into position. And here you can see the division of the pages and which class belongs to which div: http://img353.imageshack.us/img353/1503/layoutai3.jpg css Code: Original - css Code body{ margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; background: url(background.jpg) 22% 0; } .containingTitles{ float: left; width: 100%; margin: 0%; padding: 0%; background-color: #4D3D4D; color: white; overflow: hidden; } .titleNavDiv{ float: left; width: 20%; margin: 0%; padding-left: 2%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .titleContentDiv{ float: left; width: 77%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .navigationDiv{ float: left; width: 22%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #FFFFFF; background-color: #4D3D4D; } .contentDiv{ float: left; width: 76%; margin: 0; padding-left: 2%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #000000; background-color: #BFACBF; }
hope you can tell me why this happens. Thanks in advance. i have created this page with 3 divs to practice css.they all have been given the exact position in terms of top margin.since all these 3 divs extract data(headlines of different types) from a database i was wodering whether it would be possible to maintain the vertical distance between each of the divs which is 100 px constant no matter how many headlines reside in each div and increase its height.the code is given below.thanks. PHP Code: <html> <head> <title>try this..........</title> <style type="text/css"> .sportsheadlines { POSITION:ABSOLUTE; TOP:50PX; LEFT:10PX; WIDTH:350PX; FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX;TEXT-ALIGN:LEFT;BACKGROUND-COLOR:#AEDEDF; } .businessheadlines { POSITION:ABSOLUTE; TOP:150PX; LEFT:10PX; WIDTH:350PX; FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX;TEXT-ALIGN:LEFT;BACKGROUND-COLOR:#AEDEDF; } .politicalheadlines { POSITION:ABSOLUTE; TOP:250PX; LEFT:10PX; WIDTH:350PX; FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX;TEXT-ALIGN:LEFT;BACKGROUND-COLOR:#AEDEDF; } </style> </head> <body> <div class="sportsheadlines"> contains sports headlines extracted from database:<br> headline 1<br> headline 2<br> headline 3<br> </div> <div class="businessheadlines"> contains business headlines extracted from database:<br> headline 1<br> headline 2<br> headline 3<br> </div> <div class="politicalheadlines"> contains political headlines extracted from database:<br> headline 1<br> headline 2<br> headline 3<br> </div> </body> </html> Hello, How can I make a div stretch the entire height of a page (height does not seem to work for percentages)? Thanks, Jeff Hello all. Lets see if i can explain this. I will start from the inside out. div.Data holds dynamic copy. It lives and is incorrectly spilling out the bottom of div.SiteContainer. Why is this? Shouldn't the container div stretch to fit the data within it? I know that by removing the position:absolute; in div.Data it works but i need to position the div. Another issue is that div.PageFooter is incorrectly positioning. I want it directly below div.Data inside of div.SiteContainer. You can find the example here, http://www.tlcgiftsandbaskets.com/demo/position.htm. This code is stripped from the home page of the URL if you want the whole thing. Code:
<style type="text/css" title="">
body{
margin:0px;
text-align: center;
}
div.SiteContainer{ /* centers to the page.*/
position: absolute;
z-index:1;
width: 960px;
left: 50%;
margin-left: -480px;
border: 1px solid green;
}
div.Data{
position: absolute;
z-index:2;
width: 600px;
top:100px;
left:100px;
border:1px solid yellow;
}
div.PageFooter{ border:1px solid red; width:600px; }
</style>
Code: <div class="SiteContainer"> <div class="Data"> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br /> <br /> </div> <p> <div class="PageFooter" style="">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</div> </div> Hi all take a look at http://www.vashvision.com/index.php?module=forum&file=forums How can i get the topics and reply boxes to sit next to eachother after the large forum box? Hi, I'm still having trouble positioning my divs. I've read numerous articles/tutorials about how to position divs but I still don't get the hang of it. This is my site and how I want it to be devided into Divs: http:// img147.imageshack.us/img147/9519/positioningck4.jpg Could anyone help me out? Thanks Edit: got it figured, Grids CSS has default presets, changed those and it worked Hello! I am making a wordpress template for my site and i am using a template from a template generator to work from. The idea is to get a single centered column. The CSS file of the template is using YUI CSS, and apparently the divs; yui-t7, yui-navset and yui-b must have a minimum width of 750px. But since my site is smaller than that I ended up having a slightly offset page. I tried reducing the width, but that doesn't work. So i guess I'll have to center the content divs that reside within those divs. I have tried: text-align: center; margin-left: auto; margin-right: auto; and padding: somenumber px; but those have failed. Can anyone help me with centering my page? I can't upload a screen shot, but if needed I can send a pm to whoever wants to help me Thanks in advance! I'm trying to position various images and divs within a central container div using css. The page in question is http://www.pinkpic.net/studentrenting/divtest.php The central area with lines down either side is a div with a min height of 96%. The image at the top is positioned:relative, and the blue bar which appears just underneath is supposed to appear right at the bottom of the container div. I thought that by using position:relative; bottom:0px; it would stick it right at the bottom, but that does not seem to be the case I have always had perfectly good luck designing pages with tables, but after deciding its time to convert to css I am just about ready to sell my computer and take up golf. Its causing me serious mental strain! Thanks a lot guys Tom Is there a way to add a property to a div that will position it according to the div above it? I'm trying to create content pages for my site, but the text on some is much longer than others. Giving a new id to each one just seems too tedious, there must be something I'm missing. |
|||||||