|
CSS - Multi-column Float Issues
Greetings,
Basic Layout is: Page-Containter -> Header-Container -> Side-Container -> Content-Container -> Footer-Container Header is normal Side is a Float Left with a width of 250 Content has a left margin of 260 (to allow for the Side-Container) Footer is normal. Pretty basic. In the content area there are more divisions to handle different sections of data. The problem is that in some of the content sections, I need to have dynamically allocated "blocks" of data that form psuedo "columns". I do this by doing a float:left on each of the content blocks. (generally a 250px width) That way if I show 1 or 5, they all snug up next to each other and wrap properly in the browser. Still pretty basic. Until ... drum roll please ... the next section. Since the content is "float:left", it's removed from the layout and the following sections will just "snug up" next to the last content block. I want the section to "clear" the previous content division, but don't really have a clean way to declare the "height" of that division, due to the dynamic nature of the data. Silly Rabbit ... just do a clear:left !! In IE it works fine. In Firefox, the clear:left command is clearing the previous container! (side-container ... aka: left nav bar) First question: Which browser is right? is IE right and the clear:left should be contained to it's own division? or is firefox right and the clear:left checks all float:left regardless of division? Second question: If IE is right, what is the fix ... if Firefox is right, how should I actually structure this? Similar Tutorialshello. I am currently using a simple horizontal top menu with a vertical drop down. I would like to change the vertical drop down to be horizontal, multi column, and should accomodate more than one line, if possible. The example I'm going for is used as top navigation he nfl - baltimore ravens home page and he ge home page Here is the code I'm using currently (would like it to be all CSS). #### ul#mainNavigation { padding-left:185px; } ul#mainNavigation li { padding:0 16px; float: left; display:inline; position: relative; list-style: none; color:White; _width:1px; } ul#mainNavigation li.Seperator { padding:0px; _width:1px; } ul#mainNavigation li.over { background-color:white; } ul#mainNavigation li.over a { color:Red; } ul#mainNavigation li a { color:White; text-transform:uppercase; text-decoration:none; font-weight:bold; display:block; } ul#mainNavigation a:hover { color: Red; } ul#mainNavigation li a { display: block; } ul#mainNavigation li p { height:19px; } ul#mainNavigation li ul { display: none; position: absolute; background-color:Black; opacity:.8; filter: alpha(opacity=80); -moz-opacity: 0.8; margin-left:-16px; } ul#mainNavigation li.over ul { display: block; z-index:999; } ul#mainNavigation li.over ul li { float: none; background:none; border:none; white-space:nowrap; padding:0px; } ul#mainNavigation li.over ul li a { color: white; padding:5px; border-bottom:solid 1px black; } ul#mainNavigation li.over ul li a:hover { background: #3d1f6e; color: white; } ~~~~~~~ HTML ~~~~~~~~~~~~~~ <ul id="mainNavigation"> <li> <p><a href="Mainlink1.html">Mainlink1</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> <li> <p><a href="Mainlink2.html">Mainlink2</a></p> <ul> <li><a href="link2.html">LINK 2</a></li> <li><a href="link3.html">LINK 3</a></li> <li><a href="link4.html">LINK 4</a></li> <li><a href="link5.html">LINK 5</a></li> <li><a href="link6.html">LINK 6</a></li> <li><a href="link7.html">LINK 7</a></li> </ul> </li> </ul> #### Thank you, in advance! ~ lahddah This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi I have sucessfully created a 4 column 2 row layout which works fine in IE, FireFox & Opera. The problem i have is that search1 needs to span the width of search and vote as opposed to just the width of search. (I have included the html allowing you to see what i mean). Any ideas on how i would achieve this? - its driving me insane <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <style> div.container{position:absolute;left:0px;top:283px; width:751px; background-color:#CC3300; } div.panelmain { float:left; width: 191px; background-color:#999999; } div.panelmain1 {float:left; width: 191px; background-color:#0000FF; } div.panelmain2 {float:right;width: 170px; background-color:#CCFFFF; } #featured{ width:170px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; float:left ; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #vote{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; float:left; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #vote1{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; clear:both; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #members{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; float:left; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #members1{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; clear:both; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #search{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; float:left; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #search1{ width:191.3px; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-color:a6b7db; clear:both; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #content{ float: left; width: 55%; } </style> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div class="container"> <div class="panelmain"> <div id="members"> members</div> <div id="members1"> <p>members1sssssssssssssssssss</p> <p>s</p> <p>ss</p> </div> </div> <div class="panelmain1"> <div id="search"> <p>Search</p> <p>d</p> <p>d</p> <p>dd</p> </div> <div id="search1"> search1 <p>s</p> <p>s</p> <p>d</p> <p>d</p> <p>ds</p> <p>s</p> <p>s</p> </div> </div> <div class="panelmain"> <div id="vote"> <p>Vote</p> <p>ss</p> <p>s</p> <p>ss</p> </div> </div> <div class="panelmain2"> <div id="featured"> <p>featured</p> <p>ss</p> <p>sss</p> <p>ss</p> <p>sss</p> <p>ss</p> <p>ss</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> <p>s</p> </div> </div> </body> </html> I saw an idea that I liked a whole lot for displaying pictures and that kind of thing. I didn't want to really hank the guys code, but tried to make my own version of it. The problem I have is yet again with Internet Explorer doing really stupid things with the pics I drop in my div's. It keeps adding a padding to it and it's beginning to aggravate me. Here is the code I had: body { height: 100%; margin: 0; padding: 0; background: #4F6A84; text-align: center; } #super_container { position: absolute; top: 70px; left: 0; width: 100%; height: 438px; background: #424242; padding: 0; margin: 0 auto; text-align: center; } #super_container { height: 438px; } #sub_container { width:775px; voice-family: "\"}\""; voice-family: inherit; width: 765px; /*border-right: 1px solid #7D1E2C; border-left: 1px solid #7D1E2C;*/ height: 438px; background: transparent; margin: 0 auto; } #sub_container { width: 765px;} #right{ float: right; width: 150px; height: 438px; background: #c5c5c5; } #left { float: left; width: 400px; height: 438px; margin: 0px; padding: 0px; background: blue; overflow:visisble; background-image:url(new_test/test1.jpg); background-repeat:no-repeat; background-position:top left; } #left img { padding: 0px; margin: 0px; border: 5px solid #fff;} #center { margin-left: 401px; margin-right:151px; padding:0px 0px 0px 0px; border-top:1px solid green; } and the html <body> <div id="super_container"><!--start of super container--> <div id="sub_container"><!--start sub_container--> <div id="right"> </div> <div id="left"> </div> <div id="center"> test </div> </div><!--end sub_container--> </div><!---end of super conatiner--> </body> the problem becomes evident when I put an image in the htnl of the left element. It either looks likeit rises just above the top of the super-container, or it is flush with the top and leaves a margin underneath it. As always, any help or design/tips as to what I am doing wrong would be great. I am just experimenting with new things, trying to see what I can or cannot do. The idea would be to have a home page with picture and right column with info. Then on the sub-pages have nav and subnav on the middle and right columns and pics on the left. Just a dry run, trying to see where i am. Thanks for the help in advance! jon Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. I am working on a simple css design for my site. It has a header, footer, and I am trying to divide the content into two columns. the attempt is he http://www.jimpix.co.uk/rejig/008.htm I have the two content columns defined as: #leftcol { width:70%; float:left; border:1px solid black; } #rightcol { width:25%; float:right; border:1px solid black; } The above divs sit within a main 'content' div: #content { padding:10px; border-top:2px solid #999999; border-bottom:10px solid black; } But when I view the site in either IE6 or Firefox, the rightcol and leftcol divs do not sit within the content div, or at least, they don't appear to on the screen. Instead of the 'content' div expanding to contain the leftcol and rightcol divs, it just sits at the top, hence why there is a big black line at the top, instead of at the bottom, underneath the columns. Can anyone see what I am doing wrong please? Thanks Jim I have a page that has a header, footer, left content box, and right sidebar. I'm using a negative margin on the content container to get the right sidebar to fill the space so I can keep a sensible order within the html code. The right sidebar isn't taking up the negative margin space like it should. It floats right but takes up residence under the content box. It works without negative margins if I put the right sidebar first in the order (before the content) but I shouldn't have to do that. It also works using absolute positioning on the right sidebar but this is going to be a problem for pages that will have content that takes up less space than the sidebar (because of the footer). I have uploaded the page on one of my servers:test page page so you can see it in action. Here's the CSS/HTML code: 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"><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style media="screen">
body {
margin: 0;
padding: 0;
text-align: center;
}
div#pageframe {
border: solid 1px black;
margin: 0px auto 0px auto;
width: 741px; /* total pagewidth */
}
div#headerbox {
border: solid 1px gray;
width: 741px;
height: 95px;
}
div#whiteboxes {
border: solid 1px red;
width: 741px;
float: left;
margin-right: -210px;
}
#middlecontent {
border: solid 1px purple;
margin-right: 210px;
text-align: left;
}
div#rightside {
border: solid 1px yellow;
width: 185px;
float: right;
}
div#footer {
border: solid 1px olive;
float: none;
width:741px;
height:55px;
clear: both;
}
</style></head>
<body>
<div id="pageframe">
<div id="headerbox">
<h1>This is the Header.</h1>
</div>
<div id="whiteboxes">
<div id="middlecontent">
<h1>middle content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nulla
facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget,
arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
adipiscing ac, erat. Integer nonummy mauris sit amet metus. In
adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Vivamus imperdiet mattis risus. In hac
habitasse platea dictumst. Curabitur aliquam rhoncus nunc. Suspendisse
sit amet purus in wisi egestas placerat. Nunc varius suscipit magna.
Fusce commodo dolor vel felis. Nunc auctor elit vitae justo. Donec
lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus diam wisi, tincidunt et, sollicitudin a, ultricies quis, est.
Sed ut velit.</p>
<p>Aliquam sit amet mi. Pellentesque imperdiet
metus vitae wisi hendrerit imperdiet. Donec molestie tortor quis odio
rutrum mattis. Donec nec sem. Proin tempus tempor risus. Suspendisse
odio. Donec id mi. Maecenas est orci, porttitor eget, vehicula at,
rhoncus a, magna. Duis eu tellus. Donec blandit, orci quis commodo
tincidunt, mi leo tempor enim, in hendrerit eros lacus blandit urna.
Donec sed mi nec dui varius fringilla.</p>
<p>Quisque pretium, augue
non blandit ultrices, ipsum augue varius velit, a adipiscing nulla nunc
consectetuer diam. Maecenas eu ante non dui euismod euismod. Proin est
tortor, bibendum in, imperdiet quis, porta vel, purus. Quisque
tincidunt tincidunt elit. Suspendisse a mi. Nam faucibus. Aliquam
imperdiet pulvinar turpis. Vivamus sit amet elit a leo tincidunt
varius. Cras et orci. Aenean non velit vitae risus posuere iaculis.
Quisque porta nibh sed massa. Aliquam non ante. Proin semper ipsum nec
enim. Maecenas vestibulum nisl non magna. Aenean auctor. Nulla
tincidunt augue ac quam. Etiam ultricies purus et metus. Aliquam tempus
dignissim felis.</p>
<p>Curabitur euismod odio. Suspendisse potenti.
Aliquam est augue, feugiat non, sodales nec, aliquet et, massa. Nulla
eu tellus sed mi mollis aliquam. Fusce sed sem. Etiam tempus augue non
nulla. Nunc pede ligula, fringilla in, lobortis et, dictum a, est. Sed
accumsan, nisl vel suscipit scelerisque, arcu turpis dictum augue, ut
sagittis metus pede non felis. Donec mollis ipsum eu sapien. Sed eget
nisl. Nunc sem eros, dapibus consectetuer, molestie non, elementum sit
amet, felis. Donec eu diam eu nibh tincidunt malesuada. Mauris
fringilla volutpat odio.</p>
</div><!-- end middlecontent -->
<div id="rightside">
<h1>right frame</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Phasellus varius eleifend tellus.
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod.
Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices
dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed
tellus. Etiam semper sapien eget metus.</p>
</div>
</div><!-- end whiteboxes -->
<div id="footer">
<p>FOOTER<br />Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</p>
</div>
</div><!-- end pageFrame -->
</body></html>
Any help is greatly appreciated. I'm doing a 2 column layout via css (my first attempt at doing full css layout) and I'm having some problems in firefox getting it to work right. Code:
#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #0163CB;
}
#content{
width: 80%;
float:left;
}
then my divs are as follows:
<div id=navBar>
stuff
</div>
<div id=content>
more stuff
</div>
The problem is that in firefox the top of content sits directly to the bottom and left of the end of navBar . If I set conent width to 78% it seems to be fine but it there are borders inside content that i want to take up 100% of the remaining page. Thanks Dave Hi all, I'm currently working on converting a table based site to a CSS table less one. I have a fairly good understanding of CSS, but have come across a problem and would like some help in sorting it out if possible. The code I am pasting here is a quick mock up of what I am trying to acheive. It is a 2 column page, with a header and footer. When I run this code in IE 6, it seems to work as I think it should. When I run it in Opera 9, the maincenter content seems to move to the top of the last float in left column. I assume that my css code is wrong or my understanding is wrong, or there is some quirk, hack etc that I should be using. 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> <!--Don't add anything above this line, you may change the DTD to match your page--> <title>Test Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">This is the header</div> <div id="main"> <div id="mainleft">stuff on the left<br /> more stuff on the left</div> <div id="mainleft1">stuff on the left<br /> more stuff on the left</div> <div id="mainleft2">stuff on the left<br /> more stuff on the left </div> <div id="mainleft3">stuff on the left<br /> more stuff on the left</div> <div id="mainleft4">stuff on the left<br /> more stuff on the left</div> <div id="mainleft5">stuff on the left<br /> more stuff on the left</div> <div id="maincenter">stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /></div> <div class="clear"></div> </div> <div id="footer">This is the footer</div> </div> </body> </html> CSS: Code:
#container {
width: 600px;
text-align: center;
margin: 20px auto 0 auto; }
#header {
width: 598px;
margin: 0px 0px 0px 0px;
border: solid 1px; }
#main {
margin: 20px 0px 0px 0px;
border: solid 1px;
float: left;
width: 598px;
overflow: auto; }
#mainleft {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft1 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft2 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft3 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft4 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft5 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#maincenter {
float: left;
display: inline;
margin: 5px 5px 5px 5px;
border: solid 1px;
width: 424px; }
.clear { clear: both; }
#footer {
margin: 20px 0px 0px 0px;
border: solid 1px;
width: 598px; }
Some notes: 1. Originally I had the left hand stuff in a div called mainleft, but had trouble getting that to work. Would that be correct, to include all the code in one div, with smaller divs inside it? 2. The little boxes on the left will be different boxes on the page, but for the mockup they are all the same, with different ids. 3. After looking around, I found out about the overflow: auto; for inside the main div, which fixed a nice problem I was having (main not having any content bar floats). Is IE 6 displaying the code right, or is Opera 9? --> I just had a bit of play around before posting and if I add a div around all the mainlefts, the code seems to work in both IE 6 and Opera. So whould that be best, to stick with that? I think adding in the overflow:auto; fixed the problem I was having with that earlier. Would still apreciate any comments Many thanks Scott Hello, I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing. This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious. Regards, Lee At the moment I have a css layout nearly done. It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div. The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven. A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that. Layout CSS code Code: #body {
position:relative;
margin:0 auto;
width:94%;
min-width:50em;
max-width:70em;
border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
height: 185px;
background-color:#ffffff;
background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {
background: #ffffff url(../images/design/background_3.gif) repeat-y left;
border-top:none;
border-bottom:none;
}
#wrapper {
background: url(../images/design/background_2.gif) repeat-y right;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
margin-right: 200px;
/*background: url(../images/design/background_3.gif) repeat-y left;*/
}
#main {
/*border:1px solid #000000;*/
margin-left: 150px;
/* background-color:#bbbbbb;*/
}
#left {
position: absolute;
top:189px;
width: 140px;
/* height: 100%;*/
float: left;
text-align: left;
/* border-left: 2px solid #bbbbbb;*/
font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
width: 200px;
float: right;
clear:right;
}
#footer {
/* border: 1px solid #000000;*/
background: #304773;
height: 30px;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
Div structu Code: <div id="body">
<div id="header"><h1>Welkom bij Overeem de Haas</h1>
</div>
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<div id="main">
</div>
<div id="left">
<? include ("../include/navigatie.inc"); ?>
</div>
</div>
</div>
<div id="sidebar">
<? include ("../include/uitloggen.inc");?>
<? include ("../include/winkelmand.inc"); ?>
</div>
<div class="clearing"> </div>
</div>
</div>
<div id="footer"><p class="content"></p></div>
</div>
navigatie.inc code Code: <div id="navigatie">
<ul>
<li class="menu">Navigatie menu</li>
<li><a href="index.php">Home pagina</a></li>
<li><a href="#">Wat is Overeem?</a></li>
<? ...
echo "<li><a href=\"#\">Contact</a></li>";
echo "</ul>";
echo "</div>";
?>
Live example Can anyone (dev)shed some light on this? I just can't get it to work without messing up the 3rd column. I have the following: Quote: <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> Not the nicest of code but it'll do for now. I want each div with class=video to come under one another but at the moment, the 2nd div starts just after the text in the first div and not actually under it. This is in the middle column of a 3 column CSS layout. The bottom is what the .video class has. Quote: .video { margin-bottom:10px; } Any help? What a giant surprise here but I need some assistance with my CSS Float . In FF, Safari, and IE6 everything displays correctly. However, Opera 9.64 and IE7 / IE8 have major issues. I know there are still a few quirks in my physical XHTML mostly Alt attributes not filled in yet (I'm more worried about full cross browser compatibility). I have eliminated tables for everything possible but have had more problems by removing all of them. Live Site: moo-ving dot com I hate to make everyone type it out sorry. Howdy folks. I'm working on a site right now with a fixed sized menu on the left, and a fluid layout to the right of it. I CANNOT get the h1 header to come up to the top in FF!!! Here's the page, and here's the CSS. I found a link on how to do it thru bonrouge's site...but it's not quite working how i want it to. Thanks! so, i have a form with rounded corners, which i've had no problems with in the past. the problem here is that the background color behind the box with the rounded corners is going to be user-generated and the box itself can change in width. my solution was to float the corners left and right and have the rest filled in the middle. works perfectly in firefox, giving the middle element an automatic width with margins on either side equal to the size of the corner images. however, IE decided to add in extra space between the 3 elements. ive tried giving the elements a display:inline-block property, but it didnt help. Code:
#petition_letter {
width: 330px;
margin: 25px auto 0;
}
.lettertop .left, .lettertop .right {
display: block;
width: 15px;
height: 15px;
background-image: url(lettertop.gif);
background-repeat: no-repeat;
}
.letterbottom .left, .letterbottom .right {
display: block;
width: 15px;
height: 40px;
background-image: url(letterbottom.gif);
background-repeat: no-repeat;
}
.letterbottom .right { width: 40px; }
.lettertop .left { float: left; background-position: top left; }
.lettertop .right { float: right; background-position: top right; }
.letterbottom .left { float: left; background-position: bottom left; }
.letterbottom .right { float: right; background-position: bottom right; }
.lettertop .middle, .letterbottom .middle {
display: block;
height: 15px;
margin: 0 15px;
background: #fff;
}
.letterbottom .middle {
padding-bottom: 25px;
padding-left: 15px;
margin-right: 40px;
}
.lettercontent {
border-bottom: 1px solid #fff;
background-color: #fff;
padding: 0px 30px;
font-size: 12px;
}
<div id="petition_letter">
<div class="lettertop">
<span class="left"></span>
<span class="right"></span>
<span class="middle"></span>
</div>
<div class="lettercontent textColor">
blah blah
</div>
<div class="letterbottom">
<span class="left"></span>
<span class="right"></span>
<span class="middle"></span>
</div>
</div>
I have a container containing two other divs. One is to be a left floating menu, and the other is to be a right floating content area. However, when I place these divs in a container that contains a background, the container won't expand as information is placed in the menu or the content area. My code looks like this. HTML: Code: <div class="blog-container"> <div class="blog-menu"> Some Random Menu </div> <div class="blog-content"> Some Random Content </div> </div> CSS: Code:
.blog-container {
position: relative;
text-align: center;
padding-top:15px;
width: 925px;
background-color: #eeeeee;
}
.blog-menu {
float: left;
width: 120px;
border: 1px solid blue;
}
.blog-content {
float: right;
width: 150px;
border: 1px solid red;
}
I really have no idea why it's doing this. Any help would be greatly appreciated. Hi, I have been working my way through the awesome 'Beginning CSS Web Development' by Simon Collison (highly recommended). I have also been studying and using other recourses online too. I am now toying with CSS and have created the following test page. consumer-review [dot] org [dot] uk [slash] test_lorum_ipsum [dot] html The External Style Sheet can be found at consumer-review [dot] org [dot] uk [slash] css [slash] default [dot] css I am pretty happy with it in Firefox 2. However there are three problems that no one has so far been able to help me with? Could you be the CSS genius that solves the problem? I hope so! 1) In IE6 the two floating elements (the smaller boxes on the right) don't appear where they should - they jump around the page and sometimes the content of them doesn't appear at all! Is there a simple code fix for this? 2) In Firefox 2 and Safari the links in the footer don't seem to be accessible (on my two PCs anyway), the pointer icon simply doesn't change to allow you to click! This is pretty strange! 3) In IE7 the titles/anchors that you jump to from the top of the page don't highlight. They highlight a nice yellow in Firefox! Is is possible for IE7 to highlight headers when they are jumped to via an anchor? I have been playing with this page for ages, there is probably plenty of redundant / clumsy code in the CSS sheet. Apologies for that, have only been learning for a few weeks and will neaten up when understand a bit more! I will also speed up the page loading. Thanks for any code suggestions / advice / assistance anyone can give. Good luck. Kind regards Theo. How come sometimes when I try to float left a div next to another div, it appears underneath the original and not all next to it? <div1></div1> <div2></div2> If I use float left on div1, div2 appears underneath div1, not next to it? confused beyond help! Hi all, Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer I'm designing a site with a banenr, a left column, a main body, and a right column of multiple floated divs. I can't seem to get the left column to hold its position/color. I've looked at the PIE site and can't seem to tweak my code to work in both IE and Firefox. The look is pretty solid in Firefox, though the body background isn't showing up. But in IE the left column color either floods into the rest of the container below the main div without a clear:both, or disappears altogether with a clear:both. the site is here and the css is here . Thanks. |
|||||||