|
CSS - How To: Evenly Distribute 3 Divs (2 Var./1 Fixed Width) Inside A Container
Hi folks,
I hope this is achieveable ... I have tried numerous ways of floating and whatnot, here is what i want: I want to have one container, having 3 divs inside. of these 3 divs the left and the right one are fluid, the center one is an image with a fixed width. looking like this: Code: ________________________ l l l fluid fix fluid l ________________________ restrictions: i do not want to use positioning at all. best would be, if it is all achieved with float and margins, looking good in IE and FF .... i have a page up, that will show you my design .... note, that only the box containing the image is the problem part on that page (some of you will recognize this i believe) the names of the classes are textboxleft, textboxright and id big_logo thanx! i want to redesign the page i have to only be displayed with floats and margins and no more positioning .... Similar TutorialsI'm pretty new to using CSS so please be gentle I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css"> #container { width: 760px; width: 780px; width: 760px; border: 1px solid gray; margin: 10px; margin-left: auto; margin-right: auto; padding: 10px; } #banner { padding: 5px; margin-bottom: 5px; background-color: rgb(213, 219, 225); } #content { padding: 5px; margin-left: 215px; background-color: gray; background-attachment: fixed; background-image: url(images/bg_run.jpg); background-repeat: no-repeat; height: 400px; background-position: right top; } #sidebar-a { float: left; width: 200px; \width: 210px; w\idth: 200px; margin: 0; margin-right: 5px; padding: 5px; background-color: rgb(235, 235, 235); } #footer { clear: both; padding: 5px; margin-top: 5px; background-color: rgb(213, 219, 225); } </style> </head> <body> <div id="container"> <div id="banner">Banner</div> <div id="sidebar-a">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </body> </html> I need to know what attributes to give to my container div in order for this to work correctly. I have a div and within it are many floating divs, each that contain an image thumbnail and caption. I do it this way so the images fit on the page dynamically and it works great. Unfortunately the container div does not wrap around the height of the images. This causes content that should appear below the images to show up behind them. How do I make the container div actually stretch around all the child divs? here is a code sample Code: <div style="border: 1px solid blue; width: 100%; display : inline;"> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0003.jpg" rel="lightbox[post182]" title=" size 84k"><img border="1" src="/images/media/thumbs/182_YachtClub_0003.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0004.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0004.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0006.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0006.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0007.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0007.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0011.jpg" rel="lightbox[post182]" title=" size 48k"><img border="1" src="/images/media/thumbs/182_YachtClub_0011.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0012.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0012.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0013.jpg" rel="lightbox[post182]" title=" size 62k"><img border="1" src="/images/media/thumbs/182_YachtClub_0013.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0015.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0015.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0016.jpg" rel="lightbox[post182]" title=" size 68k"><img border="1" src="/images/media/thumbs/182_YachtClub_0016.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0019.jpg" rel="lightbox[post182]" title=" size 62k"><img border="1" src="/images/media/thumbs/182_YachtClub_0019.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0020.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0020.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0021.jpg" rel="lightbox[post182]" title=" size 63k"><img border="1" src="/images/media/thumbs/182_YachtClub_0021.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0022.jpg" rel="lightbox[post182]" title=" size 36k"><img border="1" src="/images/media/thumbs/182_YachtClub_0022.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0026.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0026.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0028.jpg" rel="lightbox[post182]" title=" size 50k"><img border="1" src="/images/media/thumbs/182_YachtClub_0028.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0030.jpg" rel="lightbox[post182]" title=" size 52k"><img border="1" src="/images/media/thumbs/182_YachtClub_0030.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0031.jpg" rel="lightbox[post182]" title=" size 54k"><img border="1" src="/images/media/thumbs/182_YachtClub_0031.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0032.jpg" rel="lightbox[post182]" title=" size 63k"><img border="1" src="/images/media/thumbs/182_YachtClub_0032.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0033.jpg" rel="lightbox[post182]" title=" size 55k"><img border="1" src="/images/media/thumbs/182_YachtClub_0033.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0034.jpg" rel="lightbox[post182]" title=" size 41k"><img border="1" src="/images/media/thumbs/182_YachtClub_0034.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0035.jpg" rel="lightbox[post182]" title=" size 51k"><img border="1" src="/images/media/thumbs/182_YachtClub_0035.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0037.jpg" rel="lightbox[post182]" title=" size 48k"><img border="1" src="/images/media/thumbs/182_YachtClub_0037.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0038.jpg" rel="lightbox[post182]" title=" size 61k"><img border="1" src="/images/media/thumbs/182_YachtClub_0038.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0039.jpg" rel="lightbox[post182]" title=" size 30k"><img border="1" src="/images/media/thumbs/182_YachtClub_0039.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0040.jpg" rel="lightbox[post182]" title=" size 57k"><img border="1" src="/images/media/thumbs/182_YachtClub_0040.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0041.jpg" rel="lightbox[post182]" title=" size 45k"><img border="1" src="/images/media/thumbs/182_YachtClub_0041.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0042.jpg" rel="lightbox[post182]" title=" size 55k"><img border="1" src="/images/media/thumbs/182_YachtClub_0042.jpg" alt="" /></a><br/></div> <div style="float: left; margin: 2px; height: 150px;"><a href="/images/media/182_YachtClub_0044.jpg" rel="lightbox[post182]" title=" size 49k"><img border="1" src="/images/media/thumbs/182_YachtClub_0044.jpg" alt="" /></a><br/></div> </div> Using tables, I can evenly space the cells apart. For instance: Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center"> qwerty1 </td>
<th align="center"> qwerty2 </td>
<th align="center"> qwerty3 </td>
</tr>
</table>
There's nothing terribly wrong with this - it works! But I'm trying to switch to using CSS whereever possible. How would you achieve the same effect using stylesheets? What is the best way to evenly space these links inside the div? PHP Code: <div id="contain_header"> <div id="header"> <a href="index.php" class="nav">Homepage</a> <a href="manufacturers.php" class="nav">Manufacturers</a> <a href="contact.php" class="nav">Contact Us</a> <a href="carfinder.php" class="nav">Advanced Car Search</a> <a href="specialoffers.php" class="nav">Special Offers</a> <a href="faq.php" class="nav">FAQ's</a></div> </div> Alright, here's the situtation: Imagine a bunch of random DIVs... let's say a hundred. These DIVs come in three different widths, but their heights are entirely variable. Now, let's give these DIVs margins of 5px each. I want all of the DIVs to show up, in their respective dimensions, in order as much as possible... but I want them all 10px apart from all sides... including top and bottom. How would I achieve this effect? I tried floats, but that doesn't quite work for EDIT* - vertical spacing in all cases. Basically, if a smaller DIV can fit in an empty space, I want it to go there, so everything--despite the randomness--is uniformly spaced. Is this possible using CSS? Maybe with Javascript? I'm working on a site which has a header and footer div, and in the main section in between, it has a narrow left div and main content to the right. I've got the overall width centered at 90%, and I want the left div to be 250px wide, and then the right main content div to be the remaining width of the 90%. I also want to make sure it doesn't resize below about 600px when the screen is resized. Am I better off setting a fixed width of the overall width instead of a percentage? That way I can make the page about 800px wide, left pane 250px, and main content 550px? Any other thoughts? Thanks. I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? 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 ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Hi! Is it possible to align vertically block elements in a fixed-height (unknown) container? If not, this is a serious shortcoming of the css model of placing objects on the screen. Thanks! Thanks for taking the time to read my question. I have 2 containers, one inside the other. If the inside container grows I want the outside container to grow with it. Is that possible? Here is what I have so far... datacontainer is not growing when piccontainer grows. HTML: Code: <body> <div id="datacontainer"> <div id="piccontainer"><img src="../../My Pictures/Copy of PiercedDesktop51024x768.jpg" alt="" /></div> Data</div> </body> CSS: Code: body {
background-color: #000000;
margin-top: 0px;
font-family: Arial, Helvetica, sans-serif;
background-position: top left;
background-repeat: repeat-y;
background-image: url('VSADImages/Border.jpg');
}
#datacontainer {
margin: 0;
padding: 0px;
border-style: solid;
border-color: yellow;
background-color: #00FFFF;
border-width: 2px;
height: auto;
}
#piccontainer {
float: left;
width:700px;
margin: 0;
border-style: solid;
border-color: green;
background-color: #FF6600;
border-width: 2px;
}
Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Iv got my boxes sorted!!! but im quite newbie to CSS layout and stuff... so i want to put two boxes in side my container box side by side. i decided to use float... but they float outside my container box, which i suppose is what they are supposed to do. This is what im trying to achieve. Code: ---------------------------------------------------- | --------------------- --------------------- | | | | | | | | | | | | | | | Float Left | | Float right | | | | | | | | | | | | | | | --------------------- --------------------- | ---------------------------------------------------- |
|||||||