|
CSS - Problem With Floating Columns Under Each Other.
Okay, so here's my code. I need to know how to make the div's go under each other, without neither being side by side, or oddly spaced. Oh, and only Chrome and Safari honor the top: 20%;. I tried putting in a link, but I'm a new user so can't put it in. D: I would like the div's to go below each other, but not sure how to do it. Also, if possible, does anyone know how I could set a determined height? I seem to have the width down.
By the way, I'm sort of new to coding, so feel free to school me on how to code it better. Here's the code that I'm using, if you can see my error from the code alone. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<title>Test</title>
<style type="text/css" media="all">
.navbodyleft {
color: #ffffff;
background-color: black;
font-family:arial;
font-size: 20px;
position: relative;
top:0%;
float: right;
width: 10%;
}
.hai {
color: #cc0000;
background-color: yellow;
font-family:arial;
font-size: 20px;
position: relative;
top: 10%;
float: right;
width: 10%;
}
</style>
</head><body>
<div class="hai">hai</div>
<div class="navbodyleft">hi</center></div>
</body></html>
So, in short, I would like to know: how to make the floating divs go under each other how to set a determined height for the floating divs how to make all browsers acknowledge my preset distance from top Thanks guys. Similar TutorialsMy problem is, review section is completely jumbled. I'v attached screen shots of the correct layout taken from another website. Any suggestions would be appreciated. http://www.refinethetaste.com/html/default.asp?Section=product&PRODUCTID=14#fragment-3 Code:
#product .raterprofile { float:left; width:200px;}
#product .raterprofile .intprofile { font-size: 14px;color: #9e0b0e; font-weight:bold; letter-spacing: -1px;}
#product .ratercontent { float:left; width:325px; border-left:1px dotted #ccc;}
#product .ratercontent .intrating { font-size: 14px;color: #9e0b0e; font-weight:bold; letter-spacing: -1px;}
I'm somewhat new to CSS, so excuse me if this post sounds noobish. The goal here is to make a simple 3 column layout with a header and a footer. For the most part, I've Googled around and I've got the basics of it down. But theres one problem - the far right column refuses to sit right below the header like it should. Its in its place horizontally - but vertically, it doesn't want to appear until the center column has ended. Heres the CSS I'm using - I hope you can infer what the IDs mean: Code:
#header {
background-color:#D7D7D7;
color:#000000;
padding:0;
background-image:url(images/headerpng.png);
background-repeat:no-repeat;
background-position:top center;
height:96px;
border:2px solid black;
width:100%;
}
#header h1 {
padding:0;
margin:0;
}
#leftnav {
float:left;
width:100px;
padding:5px;
margin:0px;
text-align:center;
font-family:Arial;
}
#centercontent {
margin-left:110px;
margin-top:5px;
margin-right:150px;
}
#footer {
clear:both;
text-align:center;
font-size:9px;
color:#666666;
}
#rightnav {
float:right;
width:100px;
padding:5px;
margin:0px;
text-align:center;
font-family:Arial;
}
By the way, I know there are a few unnecessary properties in there, but I haven't cleaned this code up yet - just looking for the solution to my nesting problem. Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Hi All I seem to have an issue with floating an element in IE6&7. All other browsers (including IE8) are fine. When using a right float element, IE7 seems to push the elements to the left of it below the right-floated element, instead of to the left where they are suppose to be. Is there a work-a-round and/or hack for this? Cheers! Russ http://tonglebeak.com View it in FF, and the floating boxes correctly appear on top of the white div underneath of it. View it in IE, and the floating boxes push the white div below them. How can I get IE to render this the same as FF? Hi.. I have a problem with ie rendering floaring dd's. What happens is the dd stay next to each other even if i had cleared it. It works fine in FF. Can anyone share some light? ... here is the code... Code:
<dl>
<dt>Email:</dt>
<dd><input type="text" /></dd>
<dt>State:</dt>
<dd>
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</dd>
<dt>Year of Birth:</dt>
<dd>
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</dd>
</dl>
and the css: Code:
dl{
}
dl dt{
clear:both;
width:80px;
text-align:right;
margin:10px 0;
}
dl dd{
margin:8px 0 0 5px;
}
dl dt,dl dd{
float:left;
}
thank you in advance Hi I use DIV to display image thumbnails in a row from php loop. for each div containing image I have set the attribute float: left; so that multiple images can be displayed in parallel. Now the problem is that if I have a single image then there is no need to show it on the extreme left of the page but in the center, but the thumbnail is displayed on the extreme left, here is my code till now, PHP Code: echo "<div style=' text-align: center; border: solid 1px #993333; padding: 1px; margin: 2px; float: left; margin-left: 6%; '>"; echo "<div style=' text-align: center; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;'> <a href='/$path' rel=\"lightbox\"><img src='/print_resize_image.php?image=$path&type=$extension' width=200 height=150 border=0 ></a> </div></div>"; The image below is how I want my website to look (div-wise, that is). It looks like this on all platforms and on all browsers except IE 5.0 and 6.0: IE 5.0 and 6.0 render the following: I have included my html + css code below. I have tried to make #sidenav float:left instead of float:right. This makes no difference for browsers but IE 5.0 and 6.0, which then again render the page wrong. Also decreasing the width of #sidenav (i.e. to 20px) doesn't help; the result is the same. Could somebody please help me fixing this There must be at least one css guru out there today All help is greatly appreciated! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#main {
background-color: red;
text-align: center;
}
#wrapper {
text-align: left;
margin: 0 auto;
width: 300px;
}
#content {
background: yellow;
width: 200px;
float: left;
margin-left:50px;
}
#logo {
background-color: lime;
}
#mainnav {
background-color: pink;
}
#subnav {
background-color: navy;
}
#text {
background-color: orange;
}
#sidenav {
background-color: blue;
width: 50px;
float: right;
padding-top: 50px;
}
#footery {
clear:both;
background-color: #fff;
}
#footer {
background-color: pink;
margin: 0 auto;
width: 200px;
}
#logo, #mainnav, #subnav, #footer {
min-height: 30px;
}
</style>
</head>
<body>
<div id="main">
<div id="wrapper">
<div id="content">
<div id="logo"><br><br></div>
<div id="mainnav"><br><br></div>
<div id="subnav"><br><br></div>
<div id="text"><br><br><br></div>
</div>
<div id="sidenav">text</div>
</div>
<div id="footery">
<div id="footer"><br><br></div>
</div>
</div>
</body>
</html>
Please view the attached image. I want it as; left arrow - gallery - right content all on same line. css Code:
#content #gallery { float:left; width:100%; }
#content #gallery .list { float:left; border: 1px solid black; background-color: #dfdfdf; }
#content #gallery .list li img, #content #gallery .list li p { width: 200px; height: 150px; margin: 10px; }
#content #gallery a.galleryprev, #content #gallery a.gallerynext { display: block; float: left; width: 28px; height: 150px; text-decoration: none; background: url("http://www.gmarwaha.com/image/imageNavLeft.gif") left 60px no-repeat; }
#content #gallery a.gallerynext { background: url("http://www.gmarwaha.com/image/imageNavRight.gif") right 60px no-repeat; }
#content #gallery a.gallerynext:hover { background-image: url("http://www.gmarwaha.com/image/imageNavRightHover.gif"); }
#content #gallery a.galleryprev:hover { background-image: url("http://www.gmarwaha.com/image/imageNavLeftHover.gif"); }
#content #gallery a:hover, #content #gallery a:active { border: none; outline: none; }
html Code:
<div id="gallery">
<a href="#" class="galleryprev"> </a>
<div class="list">
<ul>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/1.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/2.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/3.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/4.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/5.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/6.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/7.jpg" alt="" width="200" height="150" /></li>
<li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/8.jpg" alt="" width="200" height="150" /></li>
</ul>
</div>
<a href="#" class="gallerynext"> </a>
</div>
I use form field hints on my sign up page. I am trying to float it to right with the codes below but its not happening. .hint { float:right; display: none; position:absolute; width: 150px; border: 1px solid #aaaaaa; background: #d7d7d7; } www.pearl.ru/isdunyasi/signup.asp [code] <div id="wrapper" style="background-color:black;padding:2px;overflow:visible;"> <div id="left-floating-box" style="background-color:red;float:left;">asdfsadf</div> <div id="right-floating-box" style="background-color:blue;float:right;">asdfsadf</div> </div> [code] here is a problem, warpper div doesnt strech to the height of the floating divs, ofcourse when you get rid of floating then everything work but i need this to work as it intended and that is two floating boxes with in one div and this div would wrap around two floating boxes and that way background would stretch as well. I rember solving this problem. Long time ago, but for some reason i am stock right now with this problem. Any one can refresh or sugest anything. Thank you. Following on from an earlier thread I've split one problem off into the code below which can also be found at http://alphaworks.co.uk/test/float.htm The problem should be obvious from the text but just to confirm I want the left boundary of the text to be straight and not to flow back under the image as it is currently doing. I can do that with a margin-left:110px on the .description class but I'd rather have a solution which didn't depend on knowing the width of the image as this may well vary. Is there a way to do this? Thanks, Geoff Code: <html>
<head>
<style type="text/css">
.image
{
border : solid black 1px;
margin : 5px;
padding : 5px;
float : left;
}
.description
{
}
</style>
</head>
<div class="image">
<img src="" width="100" height="100"/>
</div>
<div class="description">
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
This should be to the right of the image and should not flow underneath the image.
</div>
</html>
I want "alternate views" text and thumbimage stand on the same line. I dont understand why the image moves a line below. Please advise. PHP Code: html: #product .productimage .thumb { float:left; width: 250px; border-bottom:1px dotted #ece7d1; } #product img#thumbimage { float:right; width: 16px; height: 16px; border: 0px; } css: <div class="thumb"> alternate views : <img src="http://www.refinethetaste.com/html/THEMES/default/images/pictures.png" id="thumbimage" /> </div> I dont know what I am doing wrong. I checked one of the online templates and actually I got the idea from an online template. I want to float columnist image to left, short text to right with these codes. It appears fine at ie but in firefox text appears line under image. Here; http://www.pearl.ru/isdunyasi #maincontentcolumns { float:left; margin-right:2px; width:598px; height:150px; background:#FFFFFF url(images/innerheadline_bg.gif) top no-repeat; } #maincontentcolumns h1 { padding:0px; margin-bottom:5px; font-size:14px; font-weight:bold; color:#FFFFFF; } #maincontentcolumns .c { float:left; margin:0px 2px 0px 2px; width:292px; height:80px; } #maincontentcolumns .c img { float:left; position:relative; height:80px; width:80px; padding:2px; } #maincontentcolumns .c p { float:right; padding:2px; margin:0; font-size:14px; } PS: This is my last working with ie not with firefox message. I started testing with firefox. When it works with firefox it surely works with ie. Hi there, I'm having a problem floating an unordered list to the right with IE6. With Firefox it works without problems as usual. I have uploaded on www.emotiona.com/test the failing code. I got it properly displayed when doing the following: - Set the ul tag to float: right; - Set the li and a tags to float: left; Someone knows a rational explanation to the way IE6 behaves? There's a better way to achieve the same result? Besides with the tabs turn from blue to orange in firefox without problems, but with IE6 only the background defined for the tag "a" changes when the mouse is over. I haven't solved this issue yet. Thanks, Caste http://zeroonedesign.com/beyond%2Dmap/www/ Take a look at it first in Firefox, and then in IE. As you can see IE seems unable to understand what display:inline means, or perhaps its interpreting the pixel values I set differently. I have tried a whole pile of different things. I've tried taking out the containing <div style="relative> and it makes no difference. I've tried setting everything static with no sizes but then it all collapses. I am THIS close to moving to a table based layout... sometimes CSS is just so frustrating. Can anyone spot something I'm just missing? Many thanks I have two div tags that I want to float next to each other. The page looks like this <table>These Tables stretch 100% of the width</table> <table>''</table> <div class="ParentDiv"> <div class="menuholder"></div> <div class="ChildDiv"></div></div> in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place. Is there anything I can set to do that? If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv Code:
.ParentDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
min-height: 400px;
}
.ChildDiv {
position: relative;
width: 100%;
min-height: 400px;
}
.menuholder {
background-color: #EFF3F5;
color: #eef;
position: relative;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 160px;
z-index: 100;
}
Hi Guys... i need help.. I have this problem. in Opera, whenever i float something within li, the bullet number disappears.. I want bullet number visible. Can anyone share some light? here is the snipplet Code: <style type="text/css">
li div{float:left;}
</style>
<ol>
<li><div>List Item 1</div></li>
</ol>
thank you! |
|||||||