|
CSS - Keep Float Inside Container Div?
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 | | | | | | | | | | | | | | | --------------------- --------------------- | ---------------------------------------------------- Similar TutorialsI am having some trouble using float to align containers on my page. Here is what it looks like. http://filebox.vt.edu/users/kfalcon...less_broken.JPG In this image the blue area is the "content" id, the red area is the "rostercontainer" and the cream color is the "profilecontainer". I would like the profilecontainers to appear in two columns instead of one as in this image. The problem is when i add 'float : left' to the profilecontainer or rostercontainer I get the following: http://filebox.vt.edu/users/kfalcon...scrn_broken.JPG The two profile containers are now next to each other, but the rostercontainer seems to be missing, and the profilecontainers are not being loaded into the content area. From the index.php page i am using javascript to load the roster.php page into the content area. Code:
<div id="main-nav">
<dl>
<dt id="roster"><a class="loadinto-content" href="roster.php">Roster</a></dt>
</dl>
</div>
<div id="content">
<h2>Main Page</h2>
</div>
The roster.php page looks like this: PHP Code: <div class="rostercontainer"> <?php // Go through all profiles while($profile = mysql_fetch_assoc($profiles)) { ?> <div class="profilecontainer"> <img src="image3.gif" class="floatLeft" width="150" height="115" alt="image 3" /> <strong><h3 class="profile"><?php echo $profile['name']; ?></h3></strong><br/> <?php echo $profile['active']; ?><br/> <?php echo $profile['status']; ?><br/> <?php echo $profile['ride']; ?><br/> <?php echo $profile['major']; ?><br/> <?php echo $profile['hometown']; ?><br/> <?php echo $profile['info']; ?><br/> <div class="editlink"> <a href="roster_admin.php?idx=<?php echo $profile['id']; ?>">edit</a> </div> </div> <?php } ?> </div> And here is my css file, ive only included the important parts. Code:
#page-container {
width: 760px;
margin: auto;
}
#content {
font-family: Tahoma, Arial, Helvetica, Sans-serif;
background: blue;
border-top: 1px solid #efefef;
padding: 25px;
}
div.profilecontainer {
position: relative;
width: 325px;
height:200px;
margin: 10px;
padding: 5px;
background-color: #ffe;
border: 1px dashed black;
}
div#content div.rostercontainer {
background-color:red;
float : left;
}
I am not sure if this is a CSS issue or some problem with the javascript library(HTMLHttpRequest) i am using to load pages into my content area. It is really odd the adding the float to the roster/profile container would cause such a behavior. Any ideas on how i can fix this? Thanks for any help, Karl Hi, I have a container with a border that works fine , but when I float 4 elements that are in a row, the container shrinks, and they are outside the container. How can I align four boxes, and keep them in the container? here's the example: http://www.caillouette.com/alpha-dream/ thanks okay I don't know why my text will not wrap in any of my "float:rights" My quicklink section I don't care about as much as the feature student section I'm building. The text spills out of the paragrah block and keeps running. http://www.mgan.net/form-honors/main(2).htm Any thoughts on how to fix it or a link to a site that would explain it's just as good 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;
}
Hi, I have 3 div boxes in a container, they sit side by side (i.e. 3 in a row) with different amounts of text in each div. The dilemma is that I need all the div's to be the same height as the tallest div. can someone tell me how to do this? thanks Well I'm running into just a few difficulties trying to enclose a object inside of another container. The problem is that the container does not repeat the background when I lengthen the boxes within it. Can someone with a excellent CSS eye take a look at this and let me know what I'm doing wrong. I've played with overflow:auto; but the problem is that I need to set the width of the container at 990px, and it doesn't seem to work if I statically set the width. http://www.obelix.ca/templates/index.html I am trying to get the blue box (which is the content container) to be big enough to cover both divs "cbox1" and "cbox2". Right now it only covers the <h1> title and neither of the cboxs. I also need these two cbox's to be side by side instead of on top of or below each other. I can achieve one of these at a time but not both when I play around with the float values of the cbox's. I would appreciate any help at getting the results I desire. Thanks. Here is the basic html I am working with. Code: <!DOCTYPE html>
<html>
<head>
<style media="screen" type="text/css">
#content {
margin:0px;
padding:0px;
background-color:#90C0FF;
}
#cbox1 {
border-radius:15px;
border: 2px solid #000000;
width:250px;
background-color:#FFFFFF;
padding:20px;
float:left;
}
#cbox2 {
border-radius:15px;
border: 2px solid #000000;
width:200px;
background-color:#FFFFFF;
padding:20px;
margin-left:10px;
float:left;
}
</style>
</head>
<body>
<div id="content">
<h2>LOREM IPSUM:</h2>
<div id="cbox1">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
</div>
<div id="cbox2">
But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
</div>
</div>
</body>
</html>
You can pop this right into try it: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic I'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> 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 .... sure i read an article on this somewhere but cant remember where, the problem is this Code: <div class="floated and cleared right"> stuff </div> <div class="fixed width" > <img class="floated left"> lots of text <div> related to my previous layout post. the problem is that the img (infact any floated element, cleared or not) falls below the right floated div! (red box in attatched gif) if i float and clear the first div left then the img is in the correct place within it but the div itseld drops below the right floated div help! Hello guys, I know this is asked several time, but this case is different and can't find a working solution. I'm creating a navbar using ul lists with items as images, and want to center it. I'm using the blueprint css framework, and the list items contains images instead of text. Here's the HTML code : Code: <body> <div class="container"> <div id="header" class="span-24"> <div id="header_wrapper"> <ul> <li><img src="images/nav_03.png" /></li> <li class="selected"><a href="#"><img src="images/nav_04.png" /></a></li> <li><a href="#"><img src="images/nav_05.png" /></a></li> <li><a href="#"><img src="images/nav_06.png" /></a></li> <li><a href="#"><img src="images/nav_07.png" /></a></li> <li><img src="images/nav_08.png" /></li> </ul> </div> </div><!--End Header--> </div> </body> Here's the CSS code : Code:
#header{
padding-top:53px;
border:#F00 solid 1px
}
#header_wrapper ul {
text-align: center;
}
#header_wrapper ul li {
display: inline;
}
I tried many code configurations but can't get it to work! a live preview is available here Ok so either I'm tired and not thinking straight or I'm going crazy... Never had this problem before... The top wrapper has a gap below it in IE6 so it's not flush with the middle wrapper... Any ideas... See my source code below... Thanks for the help. PHP Code: <style type="text/css"> /* Structure */ /*-------------------------------------------------------------------- */ #Container { position:relative; margin:0 auto; width:920px; height:auto; min-height:100%; } #LeftSection { float:left; display:block; width:400px; height:200px; margin:0 0 0 2px; padding: 0 0 0 0; } #RightSection { float:left; display:block; width:400px; margin:0 0 0 0; padding: 0 0 0 0; height:200px; } #GreenTop { float:left; display:block; width:399px; height:30px; margin:0 0 0 0; padding: 0 0 0 0; background-color:#bdcdba; } #GreenTitle { float:left; display:block; font-family:Arial, Helvetica, sans-serif; font-size:11px; width:100px; margin:0 0 0 0; padding:0 0 0 11px; } #InnerControls { float:left; display:block; font-family:Arial, Helvetica, sans-serif; font-size:11px; width:295px; height:auto !important; min-height:100%; margin:0 0 0 0; padding:0 0 0 0; } #innerContainer { float:left; display:block; width:295px; height:auto; margin:0 0 0 7px; padding:0 0 0 0; } /* Wraps */ /*-------------------------------------------------------------------- */ #wrapTop { float:left; margin:0 0 0 0; padding:0 0 0 0; clear:both; display:block; width:908px; height:3px; background-image:url(images/topWrapper.gif); background-repeat:no-repeat; } #wrapMiddle { float:left; margin:0 0 0 0; padding:0 0 0 0; clear:both; display:block; width:908px; height:auto; background-image:url(images/middleWrapper.gif); background-repeat:repeat-y; } #wrapBottom { float:left; margin:0 0 0 0; padding:0 0 0 0; clear:both; display:block; width:908px; height:3px; background-image:url(images/bottomWrapper.gif); background-repeat:no-repeat; } #wrapInnerTop { float:left; display:block; width:295px; height:3px; margin:0 0 0 0; padding:0 0 0 0; background-image:url(images/innerTopWrapper.gif); background-repeat:no-repeat; } #wrapInnerMiddle { float:left; display:block; width:295px; height:auto; margin:0 0 0 0; padding:0 0 0 0; background-image:url(images/innerMiddleWrapper.gif); background-repeat:repeat-y; } #wrapInnerBottom { float:left; display:block; width:295px; height:3px; margin:0 0 0 0; padding:0 0 0 0; background-image:url(images/innerBottomWrapper.gif); background-repeat:no-repeat; } </style> <div id="Container"> <div id="wrapTop"></div> <!--// Start Auto-Middle Wrapper //--> <div id="wrapMiddle"> <div id="LeftSection"> <div id="GreenTop"> <div id="GreenTitle"><strong>Branch:</strong></div> </div> <div id="InnerControls"> <div id="wrapInnerTop"></div> <div id="wrapInnerMiddle"> <div id="innerContainer">TEST<br /> TEST<br /></div> </div> <div id="wrapInnerBottom"></div> </div> </div> <div id="RightSection"></div> </div> <!--// End Auto-Middle Wrapper //--> <div id="wrapBottom"></div> </div> I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works. Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ? Thanks in advanced. subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
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> Hello there, first post, just need a quick fix. Hope you don't mind. So I'm trying to make myself a new portfolio site, but there's this 'error' I can't seem to fix... (Can't post a link in my first post, so just copy/paste "hellspike.thanez.org/newsite" in the addybar.) Basically that 150*300 infobar is supposed to be right next to the image, but it always ends up above or below the container. <!--AK47--> <div id="imgcont0"> <div id="imgcont1"><img src="images/ak47/1.jpg"></div> <div id="imgcont2"><img src="images/ak47/info.jpg"></div> </div> <!--/AK47--> imgcont0 is a 825*300 container, in which imcont1 (render) and 2 (infobar) are supposed to be. Stylesheet: #imgcont0 { width: 825px; height: 300px; margin-left: auto; margin-right: auto; } #imgcont1 { width: 650px; } #imgcont2 { margin-left: 675px; width: 150px; } As you see the code is simple, yet I can't seem to fix this problem. Ideas? Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. |
|||||||