|
CSS - Liquid Layout 100 Percent Width Problem
Hi,
I'm having a problem a liquid layout using 100 percent width. The inner box peeks out side to the right of the containing box (which is 100% width). I am viewing with firefox. At a resolution of 1024 width. With IE 6 it's very nasty looking (extremely wide). Can anyone tell me what I need to do or what I'm doing wrong please I have simplified the page to highlight the problem I'm having a problem on this page http://www.jamesfarrell.eu/fixhtml/search.htm HTML as follows: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link href="fixlayout.css" rel="stylesheet" type="text/css"/> </head> <body> <div id='wrap'> <div id="content"> <div class="searchresult1"> <h3><a href='info.php?id=486'>rent in france</a> (222.00) per week)</h3><a href=info.php?id=486><img src='images/no_image.gif' width='130' height='127' border=0 /></a><p>1 Bedrooms, 0 Bathrooms, House</p><p>s..</p> <a href='info.php?id=486'>More details</a> </div> </div> </div> <!-- <div id="goToTop" class="sNav"><p><a href="#content">^ Top</a></p></div> --> </body> </html> CSS as follows: Code: body {
color: #333333;
background-color: white;
font-size: 12px;
line-height: 1.3em;
margin: 0;
padding: 0;
border:1px solid black;
width:100%;
}
#wrap {
background: white;
margin: 0 0 2em 22%;
}
#content {
padding:0;
border-right: 1px solid #ccc;
margin-right: 4em;
width:97%;
margin-left:2.75%;
}
div.searchresult1 {
width:800px;
width: expression(this.width > 400 ? 400: true);
margin-top:20px;
margin-right:40%;
border:1px solid #9eceeb;
}
div.searchresult1:after {
content:".";
display:block;
clear:both;
height: 0;
visibility: hidden;
}
div.searchresult1{display: inline-block;}
/* Hides from IE Mac \*/
* html
div.searchresult1{height: 1%;}
div.searchresult1{display:block;}
/* End Hack */
div.searchresult1 h3{
background: #c0ddea;
margin:0;
padding:4px;
}
div.searchresult1 h4{
background: #c0ddea;
margin:0;
padding:4px;
border:1px solid black;
}
div.searchresult1 img {
margin: 10px;
float:left;
border:1px solid black;
}
Similar TutorialsWhenever I work on a liquid layout, I have been setting the Max-Width to 1280px. Is this still the normal setting? Or designers do go wider these days? Thank you Hi Guys, I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is. I'm trying to get it to be a set width. I can't quite get it figured out. Here is the link to the current layout (made to be generic). It's a layout I got from a CCS class. http://65.175.116.253/design/demo.html The css is here http://65.175.116.253/design/css.css The entire package can be downloaded here http://65.175.116.253/design/design.rar Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy. http://65.175.116.253/design/demo.jpg Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever. Here is the CSS Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: right;
width: 17em;
margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
Hi all, I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings. I've found 2 good solution: 1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu. 2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading. Similar problem is being solved in this thread, but I didn't found there anything working . Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css. Hi, My client very much likes a website that belongs to their competition. The thing she likes the most is the fact that the content is centered horizontally and vertically in the browser window. The way they (her competition) have constructed the site is to to place all the content inside a table 100% wide and 100% high with the content centered horizontally and vertically using the table's valign and align attributes. However, this isn't very "standards", is it . . . so, does anyone know of a way this same effect (content centered horizontally and vertically in browser window) can be acheived using CSS? Thanks! Hi, Hopefully someone can help with this little problem. I've got a JavaScript menu ... // JavaScript start. document.write("<table cellpadding='0' cellspacing='0' border='1' bordercolor='#999999' bgcolor='f5f5f5' width='100%'>"); document.write("<TR><TD class='MenuBackground'>"); if (MenuOption == "Body Lotion") { document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>"); } else { document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/bodylotion.html'>****Body Lotion</a>"); } document.write("</TD></TR><TR><TD class='MenuBackground'>"); if (MenuOption == "Shower Gel") { document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>"); } else { document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/showergel.html'>****Shower Gel</a>"); } document.write("</TD></TR><TR><TD class='MenuBackground'>"); if (MenuOption == "Soaps") { document.write("<a class='MenuOn' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>"); } else { document.write("<a class='MenuOff' href='http://www.natureshedgerow.com/soaps.cgi'>****Soaps</a>"); } // Menu Bottom. document.write("</TD></TR></table></td></tr></table>"); // JavaScript end. ...and associated CSS file... // css start. .MenuBackground { WIDTH: 110px; BACKGROUND: #f5f5f5; margin: 0; padding: 0; } a.MenuOn:link { FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100% } a.MenuOn:visited { FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100% } a.MenuOn:active { FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; FONT-STYLE: italic; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #b4b4b4; WIDTH: 100%; HEIGHT: 100% } a.MenuOn:hover { FONT-SIZE: 11px; color: #ffffff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #c9c9c9; WIDTH: 100%; HEIGHT: 100% } a.MenuOff:link { FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%; } a.MenuOff:visited { FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%; } a.MenuOff:active { FONT-SIZE: 11px; color: #33ccff; FONT-WEIGHT: bold; text-decoration: none; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #f5f5f5; WIDTH: 100%; } // css end. What I expect to happen is that when I scroll over the menu options the whole line should become highlighted. This works fine in IE, but for some reason it doesn't in Firefox. Firefox only highlights the text (as shown in the JavaScript code). Can anyone point out where I'm going wrong? url = http://www.natureshedgerow.com Thank you in advance PS. I've already fixed a few other problems I've found between IE and Firefox (hopefully this isn't a sign of poor worksmanship on my behalf ) Running into some issues with a design. I have provided a link to show what is happening. at the end, with some code, css, etc The design calls for using up as much space width wise as possible, so that if the resolution gets bigger, the content in the main content section will expand. There is a left side nav, which is a fixed width, and then the main content section, which I do not know the width. both are floated left. The problem is, when the content in the main section expands to get bigger, in Firefox, will expand the size of the main section div to 100% of the screen before the text will flow to the next line, and thus, throws the div (which is floated) down to the next line. Without setting a width of the main content div, and wanting to keep the left side nav a specific width, I am not sure how to avoid this problem. I just happened check in IE7, and it seems to do what I want (I haven't checked IE6). I have posted a screenshot of what happens. On the left side, is IE7, at a bigger resolution also (1280) right side of screenshot is firefox, at a smaller resolution (1024) http://ricebox.whiteazn.com/liquid.png here is some code. Also, the CSS will seem to be declared more than once, but that is because they are split up between structure.css, text.css, and theme.css. I also only put in the CSS for the main body part. Any help would be appreciated. ======================= html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Control Panel: Company Name</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="scripts/p3p.xml" rel="P3Pv1" /> </head> <body> <div id="header"> <div class="logo"> <img src="images/header/logo.jpg" width="197" height="67" alt="alt" title="title" /> </div> <div class="nav"> <div class="parent-drill"> </div> <div class="manage-nav"> <ul id="main-nav"> <li><a href="?ebxid=221" class="inventory">Inventory</a></li> <li class="selected"><a href="?ebxid=700" class="leads">Leads</a></li> <li><a href="?ebxid=500" class="analytics">Analytics</a></li> </ul> </div> </div> <div class="details"> <div class="account-info"> Company Name <span class="rep">First Name</span> </div> <div class="account-details"> <ul id="account-nav"> <li><a href="?ebxid=725">Settings</a></li> <li><a href="?ebxid=244">Account</a></li> <li class="logout"><a href="?logout">Logout</a></li> </ul> </div> </div> </div> <div id="header-seperator"> </div> <div id="main-body"> <div class="top"></div> <div class="bot"></div> <div id="section-nav-narrow"> <div class="title-hdr"><h3>Leads</h3></div> </div> <div id="body-content">main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> CSS Code: Original - CSS Code #main-body { overflow: hidden; margin-left: 10px; position: relative; } #main-body #section-nav-narrow { float: left; width: 133px; } #main-body .title-hdr { margin: 6px 3px 0 3px; padding: 0 0 6px 9px; } #main-body #section-nav-narrow .title-hdr { width: 118px; } #main-body .top { position: absolute; top: 0; left: 0; width: 133px; height: 8px; } #main-body .bot { position: absolute; bottom: 0; left: 0; width: 133px; height: 1px; } #main-body #body-content { float: left; min-width: 860px; } #main-body { background: #fff url(../images/cp_template/left_nav.gif) left top repeat-y; } #main-body #section-nav-narrow { } #main-body .top { background: #fff url(../images/cp_template/left_nav_top.jpg) left top no-repeat; } #main-body .bot { background: #fff url(../images/cp_template/left_nav_bot.gif) left top no-repeat; } #main-body .title-hdr { background-color: #fff; color: #1b5094; } #main-body #section-nav-narrow h3 { } #main-body .title-hdr h3 { font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
After many months of enjoying my new bike club site (http://www.valleyspokesmen.org) I've decided that I want to abandon the semi-liquid display for now and explore a fixed-width site. While my skills are growing, I am not so sure of myself that I feel I can make major changes to my style sheet without risking a crash and burn. So I come seeking advice. Currently when a visitor to my site clicks 'n grabs the right edge of their browser window and pulls to the right or left, the banner photo and title, five main drop-down links, and the center column all move accordingly. I'd like to assign a fixed width, like the old days when we just set the table to a width of 700px or something. Below represents what I *think* are the key parts of my .css file. #wholePage is a div that provides overall style. contentLeft, contentMain and contentRight are div's that represent the three columns that make up the pages. Can you share how I might edit my style sheet so that my site is of fixed width? If the style info below is unsufficient, let me know and I can display the whole .css file, if you like. Code:
#wholePage {
font: 90%/1.1 trebuchet, arial, helvetica, serif;
width:96%; margin:0px auto; color:#333;
}
#contentLeft {
float:left; width:180px; margin:0; padding:0 1em;
font-size:12px; border-right:1px solid #ddd;
}
#contentMain {
margin-left:200px; /* border-left:1px solid #ccc; */
margin-right:200px; /* border-right:1px solid #ccc; */
padding: 0 1em;
}
#contentRight {
background: url(../images/bg_logoRt.png) repeat-y fixed top right;
float:right; width:180px; margin:0; padding:0 1em; font-size:12px;
border-left:1px solid #ddd;
}
#footer {
clear:both; margin:0; padding:0.5em; color:#333;
border-top:2px solid green;
}
Thank you very much for your valuable time. i want to fit in my 'Did you know?' panel beside my ad, but i'm having a lot of trouble... the ad is 468x60. here is the panel: Code: <div class='ocontentsection panelmargins floatleft' style='margin-left:8px; height:101px; width:167px;'>
<h2 class='aligncenter' style='text-indent:0;'>
Did you know?
</h2>
<div class='contenttext' style='font-size:9px;'>
<p class='nomargins'>
<?php
$tips = array(
"The formula generating your VIPortals Score is:
<strong>Games Played * 2 + Votes Casted * 3 + Comments Added * 4 + (Games Played + Votes Casted + Comments Added) * 5</strong>",
"The money awarded to the winners of every contest comes from the <strong>advertisers</strong> who are paying us to place their ads here."
);
$rand_index = round(rand(0, count($tips) - 1));
echo $tips[$rand_index];
?>
</p>
</div>
</div>
look here in the middle of the page i want the text to fit inside the box too :S is there a better way of doing this? as you can see, i had to set a bunch of widths and stuff... thanks. Hello css gurus. I'm trying to fit a flash movie with 100% height in a liquid layout but i cant get rid of scroll bars. i have tied to explain the problem in this image: http://i(dot)imgur(dot)com/PhvSZ.gif (sorry new members are not allowed to post with links) in that image you can see its fine in case (1) but in case (2) when i add a header div on top, flash movie doesnt fill available space. Can anyone tell me how can i fix it with a heading div on top? Thanks. I would like to create a 2-column layout with a content area on the left and a "sidebar" area on the right. Pretty standard, right? Now the trick: on some pages, the sidebar will be absent, and I want the content area to then overflow the whole page width. I tried the following: Code: <div style="background-color: red; float: left;">content area text</div> <div style="background-color: blue; width: 200px; float: right;">sidebar text</div> When div #2 is excluded, div #1 of course expands to take up the whole page width. So that works. The problem is that when they're both present, and div #1 has a lot of text, it just pushes div #2 down a line. Note: The reason div #2 will sometimes not be present is that Drupal is generating the page, and plain leaves out div #2 if there's no content in it. It's not just empty -- it's not even included in the page. Can anyone help me accomplish this? I've looked at a lot of liquid layouts, but none seem to do quite this. Hello, To make my columns have equal lengths in fixed layouts, I have employed the Faux technique successfully. What would be the best technique for liquid layouts? I know of a js that suppose to equal the columns, and someone told there is a CSS method also. Can you still use the Faux? Any suggestions? i'm trying to write a liquit layout based in layers and css and have the next code: Code:
<style type='text/css'>
<!--
body{font-family:Verdana, Arial, Helvetica, sans-serif; margin:5px 5px 5px 5px; position:relative;}
#header{border:1px solid #000000; width:100%; height:60px; position:absolute; top:0px; left:0px; min-width:600px;}
#menu{border:1px solid #000000; position:absolute; top:60px; left:0px; width:15%; min-width:150px;}
#content{border:1px solid #000000; position:absolute; top:60px; left:15%; width:85%; min-width:450px;}
-->
</style>
and in the body: Code: <body> <div id='header'>header</div> <div id='menu'>menu links</div> <div id='content'>contents</div> the little problem here is thata due to the percentages used to determine the left position of the contents layer it overlaps with the menu layer when i resize the window but i've seen a lot of pages that do not behave this way... what am i missing???? Hi all, I'm trying to get this mock up's structure finished STAT so that I can move on to the graphical, stylistic, and textual elements that need to be done, but I'm running into issues with IE... (surprised?) The goal is to get it to render as it does in FF and Safari. The issue right now is that, while the #body div is where I want it, it is not accepting the 85px bottom margin I am trying to code. Any help? (keep in mind I had to throw it in quirks mode to get it all to render like this) SITE is at: w w w [DOT] w h o l l y l i f e [DOT] o r g [SLASH] d r u m 2 [SLASH] Thanks, Michael Hello on this page, the author shows a 3 Column Liquid Layout based on CSS percentage use. http://matthewjamestaylor.com/blog/perfect-3-column.htm The column layout is 2,1,3 (center page comes first in the html code). He states "The columns can also be configured to any other order if required." How to do the column configured as 1,2,3? (left, middle, right)? Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... I'm trying to create a header bar with some navigational links. The basic idea is that I have a little banner image about 400 pixels wide on the left. To the right of it, I have 5 navigational links listed horizontally. I want them to be evenly spaced across the rest of the page, regardless of its width. I could do this with percentages if I had them in a parent element equal to the width of the page minus the width of the image to the left. So basically, I know this isn't actual CSS syntax, but I'm looking for the functional equivalent of saying: #linkContainer{width:100%-400px;} Anybody know a good way to do something like this? This would be easy with a table, but I'm trying to stick to CSS for layout and tables only for tabular data. Well, I know CSS however I am a bit confused with fixed width and liquid layouts as far as I know fixed width is where you set a divs width in pixels and liquid is in % so it scales to the users screen size? Which one is best to use? Also, I have the following style sheet which I created, I am guessing this is a liquid layout? Code: * {
margin: 0;
padding: 0;
}
body {
font-size: 15px;
background-color: black;
color: white;
}
#header {
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid white;
}
#header h1 {
padding-left: 25px;
margin-bottom: 0px;
}
#content {
padding: 10px;
margin-left: 200px;
border-left: 1px solid white;
}
#content h1, h2, h3, h4, h5, h6 {
text-align: center;
}
#nav {
float: left;
padding: 10px;
padding-left: 15px;
width: 20%;
}
#nav li {
list-style-type: none;
}
#nav a {
text-decoration: none;
}
#footer {
clear: left;
border-top: 1px solid white;
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid white;
width: 100%;
}
a {
color: silver;
text-decoration: underline;
}
a:hover, a:focus {
font-weight: bold;
}
a:visited {
font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px;
}
p {
margin: 5px;
}
select {
width: 30%;
}
textarea {
width: 40%;
}
.floatimage {
float: left;
margin: 10px;
}
I would appreciate any advise as to whether this degrades properly as the browser is narrowed. I didn't post this in the "critique" forum because my only concern (right now) is related to CSS. There is a separate style sheet for handhelds, so if you have one I would appreciate a look from there also. Most links are still inactive. Liquid design TIA, Rob 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. Im currently working on converting my companys site to CSS2 and XHTML (www.fwawest.com) as the current one dose not comply to any standard I have managed so far to creat the top banner including down to "Construction News : UK News :" The problem Im having is the 3 colums under that. I have the 3 colums but when you resize the browser I dont want the 3rd colum to go behind the content. in other words I want the whole site to have a minimum width. becuase atm the 1st Colum (navAlpha) and the main contents (content) stay where they are which is not a problem and content has a minimum width of 300px but when you make the browser small anouth to hit the minimum width the 3rd colum (navBeta) gose behind the content. CSS Code:
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width: auto;
top:0px;
min-width:120px;
margin-left: 190px;
margin-right: 190px;
border:1px dashed black;
background-color:white;
padding:20px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#navAlpha {
position:absolute;
width:200px;
left:0px;
top:138px;
border:1px dashed black;
background-color:#eee;
z-index:2;
padding:10px;
/* The ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* "be nice to Opera 5". */
body>#navBeta {width:168px;}
#navBeta {
position:absolute;
width:200px;
top:138px;
right:0px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;
/* The ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}
/* "be nice to Opera 5". */
body>#navBeta {width:168px;}
HTML Code: <!-- Main Content --> <div id="navAlpha"> <p title="'left' DIV">example text</p> </div> <div id="navBeta"> <p title="'right' DIV">example text</p> </div> <div class="content"> <p title="'middle' DIV">example text</p> </div> P.S No I did not make the orginal site , and yes it uses tables |
|||||||