|
CSS - Keeping Div's In A Container With Float
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 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 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 | | | | | | | | | | | | | | | --------------------- --------------------- | ---------------------------------------------------- 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 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. I have a set of background images that work well in giving the impression that there is a solid page on screen. However, as you can see here , once I start introducing structure it falls apart and I'd really () like to know why. (The CSS validates OK and I've given temporary borders to the divs to help show where on the screen they should appear). Hi How do I get a <div> to stay at the bottom, constantly, even if a layer above it gets resized so that its longer than the page in the browser. I have one <div> and then the footer <div> but the upper <div> gets resized to about 1000px and over laps the footer <div>, how do I get the footer <div> to keep at the bottom ? Hi the I wonder if there is a way to keep spiders away from certain sections of my web pages? For example, keep them away from the nav_bar, but index the rest of the html page? Someone told me it could be done by CSS but I've tried to search for it without any luck. Any suggestions would be greatly appreciated. Sincerely, Ponch Hi, I have started to get to grips with CSS but I am currently just playing - I have not designed any serious pages but am about to. I wondered if it is possible (I am sure it is but I cannot work out how) to use a h1 tag in the middle of a paragraph <p> without making it start a new line. Does anyone know of a method to force the text within the h1 tag to just flow within the sentance? For example if the above block was a paragraph the word CSS on the first line could be included within a h1 tag but it would remain on the line as it currently is (however in this case it would be forced to appear as capital letters, but I can take care of that part myself). Thanks for your time I am trying to have an element that will float above the others on the page and also be centered. When I make the position absolute, it will float above the others, but won't center (dynamically with window resize) and if I make the position auto, it will center but not float above the others. Here is the style: Code:
.main {
position:auto;
margin: 0px auto;
text-align: center;
width: 800px;
background-color:red;
z-index:1;
}
Thank you I believe this has been asked before, but I'm unsure what search terms to use... Basic one column CSS layout. How to keep the footer at the bottom of the window even when content doesn't reach that far? I'm having problems with keeping the border of an div tight in against the div's content. At the following URL http://alphaworks.co.uk/problems/box/ I want the next and prev divs to be a little larger than the text inside them and then the outer prev_next div should be a little bigger than the two divs inside it but not stretching to the width of the page as it does now. Can someone show me the error of my ways? Thanks, Geoff I am working on aligning a pricelist with product and price. The procuct is on the left, and the price should align to the right on the same line. When I try to use float: right in the div for the price it jumps down a line, if I use text-align right in a relative devision it also jumps doen a line. I also tried adding align:right to the b tag. Any ideas how to get this done? I am trying to avoid tables. Thanks Hello, I'm stumped on how to float an image to the left, and still keep it in the flow of the document. Here is an example off my head. Code:
#container {
border: 1px solid #000;
}
img.floatleft {
float:left;
}
div {
display: inline;
}
<div id='container'>
<img src='myimage.jpg' class='floatleft'>
<div>text</div><br>
<div>text</div><br>
<div>
<div id='container'>
<img src='myimage.jpg' class='floatleft'>
<div>text</div><br>
<div>text</div><br>
<div>
The image will exceed the bounds of 'container' if the image is larger than the text is tall. How can I get around this? Thanks again for the help. webg <div>text</div> I'm trying to have the contact information for a site to always appear in a right div next to the main content div. I would like it to always appear in the top right of the div, no matter how much the user scrolls down. This way, the information is always visible. I tried experimenting with background images in certain divs, but Firefox (but not IE) was having trouble displaying it the way I wanted. I've seen it in action before, so I'll post a URL if i can find where. |
|||||||