|
CSS - Problem With Css Floats (images) In Layout.
Well I am having serious problems with CSS floats.
I created a design in Photoshop, sliced it and imported everything in Dreamweaver. So far, so good. However when you slice with Photoshop, you get a CSS with "position: absolute", which I am trying to avoid. However I managed to get the header partially correctly floated, but for some reason, it doesn't display correctly in Firefox. Not to mention Internet Explorer 8, which shows (empty) spaces everywhere (tried padding/margin 0px, but didn't do anything). Can someone take a quick peek and see what I am doing wrong here? And if possible correct the errors or tell me what I am doing wrong? Cause I am really hitting a brick wall at the moment. Here is the page: link Thanks in advance. //edit Okay I fixed the empty space problem in IE, I seem to have forgotten to set the doctype up correctly; my bad. But I am still having a problem with the floats. Similar TutorialsGood Day All, I have a basic layout question. In this page, any many others, I have my image element floated to the left of a table. This seems to work well in big resolutions but when I view the page on smaller resolutions, the table gets pushed down below the image. In some cases, this is ok... but if I want to prevent this from happening and keep the img and table together to prevent the dropping, how can I do this? What is the cleanest/easiest way? In the example below, the 4th table from the top is the one that will drop first. Any thoughts greatly appreciated. Also, I would like to keep my liquid layout other than grouping these two items together - and I only need to apply this to a few of them, not all. http://029c92a.netsolhost.com/abrasives/cutmetalm.html Colin Hi Guys, I am having a problem with floats. Here is the code I am using: Code: <!DOCTYPE html> <html> <head> </head> <body> <div style="width:900px; border: 1px black solid; float:left;"> <div style="width:400px; height:100px; border: 1px black solid; float:left; display:inline; background-color:blue;"></div> <div style="width:400px; height:300px; border: 1px black solid; float:left; display:block; background-color:green;"></div> <div style="width:400px; height:100px; border: 1px black solid; float:left;display:inline; background-color:red;"></div> </div> </body> </html> I am trying to get the red box to appear right under the blue box. I don't want to use a 2 column layout. Is this possible? Thanks! Elad I've got two columns set-up using floats. They work fine in Firefox, Opera and Konqueror on my machine, but a friend with Windows informs me that it doesn't work properly in Internet Explorer. The code is as follows: Code:
div.get_content_voc_left {
width: 50%;
float: left;
clear: both;
}
div.get_content_voc_right {
width: 50%;
float: right;
clear: none;
}
The results in IE can be seen in this screenshot and this screenshot. Those with IE can have a look at a live copy of the HTML here and the CSS here. Any help is appreciated I'm trying to construct a simple navigation bar that looks like the attached image. It's a simple bar with rounded corners on the ends. If I where going to use tables, I would make one row with three cells. But I hear that these days, tables for positioning are out... I'm thinking two sets of DIVs where one contained the left end, and one the right. What's confusing me is how to get the images to line up right rather than looking "stacked". I imagine it has to do with the "float" attribute, but I can't seem to find the combination that does what I need. Code:
<div>
<div>
Nav | Bar | Content
</div>
</div>
As well, how to make the full height of the end images show? My experiments seem to truncate the image height at the height of the text. Pointers? Thanks... I know this is probably something very simple I'm overlooking, but I can't seem to get this page to display corrrectly in IE. The portion I'm talking about is the footer div: although the CSS clears both, in Firefox I see the footer correctly but in IE there is some encroachment of the footer background color on the right side of the screen. URL is: http://www.readaloudproject.org/about/ Please disregard all of the other aspects of the page... this is very much still under construction and a lot more styling needs to be done. But this footer is driving me crazy because I copied working code from other sites that is now no longer working. Help! Thanks! Hey, I use floats in my page to position some div's. The page validates for both css and html-strict. When i run the code below in firefox, everything works fine. When i run it in Internet explorer, it does not. It looks messed up then. PHP Code: echo '<form name="contact_action" id="contact_action" method="post" action="process/contact_action.php?act=del">'; while($contact = mysql_fetch_array($query_result,MYSQL_ASSOC)){ echo '<div style="float: left; width: 25%; margin: 0%; padding: 0%;">'; echo '<input type="checkbox" name="selected_contacts[]" value="'.$contact['contact_id'].'"> '; echo $contact['first_name'] . ' ' . $contact['last_name']; echo '</div>'; echo '<div style="float: left; width: 75%; margin: 0%; padding: 0%;">'; echo '<a href="contact_info.php?contact_id='.$contact["contact_id"].'&act=edi">view</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=edi">edit</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=del">delete</a>'; echo '</div>'; } echo '<div style="float: left; width: 100%; margin: 0%; padding: 0%;">'; echo '<br>'; echo '<input type="submit" name="delete_selected" id="delete_selected" value="Delete Selected">'; echo '<br><br>'; echo 'Total '.$nr_of_rows.' Contacts'; echo '</div>'; echo '</form>'; hope you can help me. thanks in advance So... I've got a page I'm working on where I can't seem to get to floats to clear without compromising the layout of the divs that are floating. http://www1.romenews-tribune.com/multimedia2/ http://www1.romenews-tribune.com/multimedia2/style.css If I try the clear:after class fix, it doesn't work. If I try the overflow: hidden fix, it looks fine until the page is resized - and the overflowing content is hidden. What I want is for the right and left div is to stretch to the bottom of the page regardless of the page height, and clear to the div they are floating in. Any suggestions? Let me know if I need to provide better examples or more info, as I'm stumped on this one and feel like I've been doing this for far too long. 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 floating items inside of floating items. The problem is I cannot clear my floating items in the middle column because that ruins the other columns. How can I clear floats in the middle column? Do you have any better ideas to make my layout work? I have attached in image of how the layout should work. 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>
<title>Title</title>
<style type="text/css">
#content {
display: block;
margin: 0 5px;
padding: 0 10px;
border-top: 1px solid #0B4867;
}
.content100 {
width: 100%;
padding: 0px;
margin: 0 .5% 0 .25%;
display: inline;
background: #ffeeee;
}
.content50 {
width: 48.75%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeffee;
}
.content33 {
width: 32.25%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeeeff;
}
</style>
</head>
<body>
<div id="content">
<div style="margin: 0px 215px; padding: 0px; border: 0px; display: block;">
<div class="content100">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus viverra malesuada turpis. Sed iaculis justo sed turpis. Nulla malesuada turpis sed nibh. Mauris dui quam, cursus at, sollicitudin a, auctor quis, ligula. Vivamus varius blandit velit. Sed eu nibh. Vestibulum sit amet massa. Maecenas elementum massa ac ligula. In vitae massa ut dui facilisis lacinia. Maecenas tristique pede in elit. Duis ultricies aliquam metus. Mauris neque. Nunc nec lectus eu metus rhoncus imperdiet. Etiam egestas semper nunc. Nunc pretium tincidunt felis.
</div>
<div class="content50">
<h2>Row 1, Column 1</h2>
In nec est pretium elit eleifend semper. Suspendisse potenti. Nunc bibendum sollicitudin ante. Aliquam facilisis mi quis turpis. Nullam aliquet. Sed eget urna in metus mattis luctus. Sed nunc. Maecenas est. Morbi ullamcorper eros non magna. Donec auctor, orci pretium rutrum eleifend, pede arcu pretium dui, vitae vestibulum ante odio sit amet dui. Aliquam fringilla velit sit amet magna. Proin cursus, elit quis faucibus fermentum, diam tellus rhoncus nulla, ut iaculis orci velit id metus. Pellentesque diam metus, dapibus eu, vestibulum quis, elementum id, turpis. Morbi elementum, quam non rhoncus hendrerit, metus lacus bibendum ante, vitae sodales velit est eu neque.
</div>
<div class="content50">
<h2>Row 1, Column 2</h2>
This column is not very high.
</div>
<div class="content100">
Donec sed velit mollis erat consequat ornare. Donec accumsan, sapien a posuere tristique, felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 1</h2>
Felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 2</h2>
This column is not as high as the previous one.
</div>
<div class="content33">
<h2>Row 2 Column 3</h2>
</div>
<div class="content100">
Nunc vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam luctus tellus luctus magna. Aenean tellus sapien, venenatis id, hendrerit sit amet, lacinia sed, ante. Nullam metus. Sed cursus lobortis orci. Etiam suscipit, tellus ut rutrum mollis, urna libero ultrices lectus, non hendrerit quam elit id leo. Quisque sollicitudin, mi id imperdiet sollicitudin, orci enim rutrum nibh, non adipiscing diam augue commodo nunc. Maecenas erat massa, sagittis eu, sagittis at, commodo nec, dolor. Aliquam erat volutpat. Donec nisl erat, vulputate id, dictum non, vulputate egestas, sapien. Fusce non justo eu felis imperdiet placerat. Suspendisse mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac tellus eget risus varius vehicula. In ante.
</div>
</div>
</div>
</body>
</html>
So I have a body div which has a left and right div(columns). I need to add 2 more divs inside the left div. But, these 2 divs have to unordered lists in them. I know my CSS is pretty average if not worse. My layout looks fine except for when I add 2 divs.. I have the float:left with %50 widths.. Screen shot of how my layout looks. img209.imageshack.us/img209/2913/idear.gif I did not add any clear tags to my css.. which I think might be what's causing the issue. Side note: In IE compatibility view the top of the page has a gap and so does the right of the page.. the logo and footer are both 100% width and the top div has a -negative margin to close the gap, it looks fine without compatibility view, and fine in firefox, and chrome. XHTML passed validation and so did CSS. This is before even messing with the columns. I didn't do anything with the unordered lists. Maybe i should ask how to correctly make my layout first.. Because what I've been doing is just adding new divs where I see fit, and then going back to edit the CSS till it works. Thanks for helping me out! BTW: what book would you recommend me getting.. I understand basics of CSS and I think I'm good with XHTML, I just need to get a better definition of CSS than w3schools has to offer. Thanks again. I am working on a new layout for a friend's website; i have done a lot of the initial work and am now starting to finish things off. I know there are a few issues to deal with but i am trying to work on one thing at a time. Firstly if you take a look at the site in question, tinyurl.com/3dkeuh , if you look towards where the data and time are displayed on the site, top right, you will either notice that it displays correctly in firefox, and other browsers, but does not in ie, and other browsers, in ie the image does not fit the area it is meant to so the black background colour shows through causing two small black lines which also make the background stripes seem misaligned. The image in question is the only image on the page that is part of the layout and is not the background image of a div using css. I am trying to get the image to display in ie as it does in ff. i cannot understand why the background colour shows through as the image is the same size as the div it fits in. I am posting this in CSS Help as i believe the solution may lie in my css, maybe setting the image to the background image of a div with the same height. When i remove the decorative gun image logo thing the problem resolves itself but even when i replace the gun logo thing with a half size image the problem returns. Thanks for your time Hello Community, I'll get cracking with my code and explain all below. My CSS; Code: html, body { height:100%; margin:0; padding:0; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; background:url(../_images/stretch_header.jpg) repeat-x top left; }
body { text-align:center; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; background:url(../_images/stretch_header.jpg) repeat-x top left; }
#outer { min-height:100%; height:auto; width:987px; margin-left:auto; margin-right:auto; position:relative; text-align:left; background:url(../_images/stretch_body.jpg) repeat-y top left; }
* html #outer { height:100%; width:987px; w\idth:987px; background:url(../_images/stretch_body.jpg) repeat-y top left; }
#contentContainer { width:100%; overflow:auto; }
#headerContainer { margin:0px auto; width:987px; height:117px; background:url(../_images/stretch_header.jpg) repeat-x top left; }
#centerContent { width:735px; float:right; padding:10px 10px 15px 10px; }
#footerContainer { position:absolute; bottom:0; left:0; width:100%; height:61px; text-align:center; background:url(../_images/stretch_footer.jpg) repeat-x top left; }
#footer { width:987px; height:61px; background:url(../_images/footer.jpg) no-repeat top left; }
#clearfooter { clear:both; height:61px; width:100%; }
My HTML; Code: <body> <div id="outer"> <div id="contentContainer"> <div id="headerContainer"></div> <div id="centerContent">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div> <div id="clearfooter"></div> </div> <div id="footerContainer"> <div id="footer"></div> </div> </div> </body> At the moment you will be able to see that this layout is a 1 column, centered layout. As it stands it works very well. However what I am trying to accomplish now is causing problems. You can see from my CSS that I have 3 Background Images (stretch_header, stretch_body, stretch_footer). These are to stretch 100% of the browser, width, height, width respectively. The problem I have is that I only have enough elements present to use 2 of these backgrounds. stretch_header - put on the body/html works perfectly 100% width. stretch_body - put on the "outer" div works perfectly 100% height. This means I don't have another 100% width div to put the stretch_footer on. Every time I try to include a new div, using "position" or "float" cause various div to remove themselves from the document flow, and cause errors. The reason for the excess "a<br>" is to force the document out of the workspace and make sure it still retains it's rigidity when combined with content. So basically i'm asking how can I include another div to include the footer background 100% width. Any help would be greatly appreciated. I'm trying to create a layout (internal to a page - in the content area) that looks like this image image image image text text text text without using tables. This works great using floats but I want the entire block of images/ text centered in the container. Currently this is just left justified which looks really bad my code Code: <div align="center"> To view the site plan, please click the image below. </div> <br> <div align="center"> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=1"> <img src="siteplan/images/ecbs_01.gif" alt="Pier 66"></a><br> Bahia Mar </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=2"> <img src="siteplan/images/ecbs_01.gif"></a><br> Pier 66 </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=3"> <img src="siteplan/images/ecbs_01.gif"></a><br> Convention Center </div> <div class="lfloat"> <a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=4"> <img src="siteplan/images/ecbs_01.gif"></a><br> Sailfish Pavilion </div> </div> lfloat just specifies float:left Hello, I've made a layout using Photoshop and Dreamweaver. As you can see here. Everything is fine for me except the Site Updates section. As you can see the sides of the site updates section aren't layers, instead they're images. When I tried making them as layers they didn't give me the outcome I wanted. Can somebody please tell me how to replace those images with layers so the section expands with more content. Thanks Hi I'm trying to layout some information on a page that would previously have been designed using a table structu Code: <table>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
<tr>
<td>Item 1
<br />
Item 2
<br />
Item 3</td>
</tr>
</table>
But now have tried to redesign the layout using the following CSS: Code: #boxProdDisplay
{
width:500px;
padding:0;
margin:0;
}
#boxProdDisplay p
{
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p1
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p2
{
float:left;
clear:left;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p3
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
#boxProdDisplay p.p4
{
float:right;
clear:right;
width:228px;
border:1px solid #CCCCCC;
color:#333333;
background-color:#F5F5F5;
padding:5px 5px;
}
The problem is that it doesn't quite display correctly. The <P> elements are floated correctly, but they only appear after the last <P> tag which has been aligned left. With a table structure I could use valign to send everything to the top of the page. What can I do here? Many Thanks. Hi all, So I've been looking at this Glish template and I've been trying to create a website with it. The problem is that when I (or another user) chooses "Text Size - Largest" the third column disappears below the others. Is there any way to prevent this and make sure that column starts at the top, with the others? Should I be using "position: absolute" or other more specific code, in order to make the position of the columns in the layout more stable? Thanks. IE 7 has caused a problem with the layout on our website. The website worked fine with IE 6. http://www.membersequity.com/mcard/ Can anyone help determine what the problem is? Thanks. I've built a site for a client using a header, middle and footer. The middle is divided into content and nav. For some reason the nav drops below the content div in IE, but positions properly in FF. Could someone please help! The next step for me is to re-code the entire site and I really don't want to have to do that. http://www.cvp.jp/about.html Thank you in advance for your time and help. Ok, this is my first time creating a layout using div tags and I'm having trouble setting the footer to stay at the bottom. example From the example above, I want to footer to sit below the menu. I can't seem to get this to work. Here's my code. Code:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
background-color:white;
}
#header {
height:50px;
background-color:#0755AB;
text-align: center;
}
#content {
width:100%;
height:200px;
margin:0px 0px 0px 150px;
background-color:#008080;
text-align: center;
}
#menu {
position:absolute;
top:50px;
left:0px;
width:150px;
height:300px;
background-color:#FF9F9F;
text-align: center;
}
#footer {
height:30px;
background-color:gray;
text-align: center;
position: relative;
}
|
|||||||