CSS - Floats

Hey,

k, as per usual, all's well in FF with this site. The list to the right is forcing the paragraphs below in IE tho...I've tried a bunch of different 'clears' and what not, but can't seem to figure it out.

Here's the html;
Code:

      <div id="homelistbox"><b>Upcoming Tradeshows:</b> 
        <ul class="homelist">
          <li><a href="http://www.torontoinwaterboatshow.com">Toronto In-Water 
            Boat Show,</a> Sept 14-17 2006</li>
          <li><a href="http://www.torontoboatshow.com">Toronto International Boat 
            Show,</a> Jan. 12-21 2007</li>
          <li><a href="http://www.sportsmensshows.com/Ottawa/">Ottawa Boat, Sportsman 
            and Cottage Show,</a> Feb. 22-25 2007</li>
          <li>See the various models of Custom Weld Boats at all these shows. 
            <a href="contact.php">Contact us</a> for more information about locations 
            at the shows.</li>
        </ul>
      </div>
      <p> Freedom Boat Sales is committed to bringing Canadian recreational enthusiasts 
        exciting new and pre-owned products for the water, trail, and road.</p>
      <p>Flexibility, great pricing, and innovative products will keep you coming 
        back for all your recreational needs!</p>
      <p>Please be advised that we are currently working to improve your online 
        experience, so your patience is greatly appreciated!</p>
      <div class="clear"></div>

and the CSS;
Code:

.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}

p {
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
line-height:11pt;
color:#555;
text-decoration:none;
width:650px;
margin-top:5px;
padding:10px;
}

#homelistbox {
width:180px;
padding:5px;
margin:2px 10px;
border-top:1px dotted #CCC;
border-left:1px dotted #CCC;
min-height:120px;
float:right;
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
color:#255CB8;
}

.homelist li {
margin-top:5px;
padding-left:10px;
list-style:none;
}

.homelist a {
color:#FF0000;
text-decoration:underline;
}

.homelist a:hover {
color:#255CBE;
text-decoration:none;
}

i'm also having similar issues with simple image floats, as seen here.

It forces the paragraph underneath in IE...boourns.

Anyways, any guidance'd be greatly appreciated.

Cheers.

After fighting with JS to get scrolling content to work, I now have a problem with IE8/9, where a wide div bleeds outside of containing div. Works fine in FF and Chrome

code and css are in
http://rentz.phi.co.uk/testanimate.html

Any ideas?

Hello,
I'm currently working on a website layout that uses CSS for everything. I have a header, and two columns below that. The header works perfectly. I used float:left on both of my two columns, and they both appear side-by-side as intended. However, I want the right column to fill up the entire right side of the screen. When I try to use CSS's width: 100%; the entire right column jumps down below the left column, which is not what I want. I made a little screenshot:
http://img282.echo.cx/img282/6555/tms1od.png

I believe it can be done, but I'm stumped.

Help is appreciated

Hey,

yet again I am having issues with some floated elements in IE (6 + 7).

Have a look here.

The product details start under the bottom of the photo of the product, and I've tried a bunch of different things to get it lined up with no joy.

Here's the CSS:
Code:

#features {
position:relative;
float:right;
margin:0 20px 20px 20px;
width:350px;
border:1px solid #E1DCC6;
border-top:0;
}

* html #features {
margin:0 10px 0 10px;
}

#features p, #features p strong {
font-size:10px;
margin:4px;
padding:2px;
}

#picbox {
width:350px;
height:350px;
margin:0 20px 0 20px;
float:right;
border:1px solid #E1DCC6;
border-bottom:1px dashed #E1DCC6;
}

* html #picbox {
margin:0 10px 0 10px;
}

#detail-list {
margin:10px 60px;
}

#detail-list li {
list-style:square inside;
margin:2px;
}

#buynow {
margin:5px 10px 5px 30px;
}

#priceTable {
margin:10px 40px;
border:1px solid #E1DCC6;
}

#priceTable td {
padding:4px;
}

#priceTable td.priceRight {
background-color:#E1DCC6;
font-size:14px;
font-weight:bold;
color:red;
}
#priceTable td.priceLeft {
text-align:right;
color:white;
font-weight:bold;
background-color:#B8A488;
}

.liner {
text-decoration:line-through;
}

Any insight, as per usual, is greatly appreciated.

Hello everyone,
Newbie here
Can anyone show me how to CSS objects or text inline horizontally in the banner/header such as at the top of this forum?
My banner/header uses large text for a logo on the left, and I would like to put a search form or something on the right side of the header.
Do I have to declare the width of each?
See how much newbie I am?

Thanks for any help.

Ken

I'm trying to construct a simple navigation bar that looks like the attached image. It's a simple bar with rounded corners on the ends.

If I where going to use tables, I would make one row with three cells. But I hear that these days, tables for positioning are out...

I'm thinking two sets of DIVs where one contained the left end, and one the right. What's confusing me is how to get the images to line up right rather than looking "stacked". I imagine it has to do with the "float" attribute, but I can't seem to find the combination that does what I need.
Code:

<div>
  <div>
    Nav  |  Bar  |  Content
  </div>
</div>

As well, how to make the full height of the end images show? My experiments seem to truncate the image height at the height of the text.

Pointers?

Thanks...

http://62.190.48.108/intertest/news.php

Basically, I want to sort out the header on the box just below the filter button.

I want to get the date to stop where it is now, move where it says test to the center of the bar, and the print floated item to the far right.

I am floating three elements id's .news_date, .news_headline and .news_print, but .news_print squashes .news_headline down, and I cant seem to change the width (The element needs to only be as big as the workd PRINT).

Any ideas

Thanks in advance.

Joel

Hi,

I have started developing a new website. I am using all the knowledge I gained from this forum, however I want to improve on my previous design.

Basically I have the following Html with CSS. Code:

 <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <style>

   body{

    margin: 0;
    padding: 0;
    color: #00c;
   }

   div#wrap{

    width: 600px;
    margin: 0 auto;
    background-color: #ccc;
   }

   div#top{

    width: 550px;
    margin: 0 auto;
    background-color: #0cc;
    border: 1px solid red;
   }

   div#top div#logo{

    width: 150px;
    float: left;
   }

   div#top div#links{

    width: 400px;
    float: right;
    text-align:right;
   }

   div#top div#links ul{

    margin: 0;
    padding: 0;
    list-style: none;
   }

   div#top div#links ul li{

    float: left;
    padding-left:10px;
    padding-right:10px;

   }

   div#top div#links ul li:hover{

    color: #c00;
   }

   div#middle{

    width: 520px;
    margin: 0 auto;
    background-color: #ff0;
   }

  </style>
 </head>
 <body>

  <div id="wrap">
   <div id="top">
    <div id="logo">
     Logo
    </div>
    <div id="links">
     <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
     </ul>
    </div>
   </div>
   <div id="middle">
    Content
   </div>
  </div>

 </body>
</html> 

Now as you can see I have the logo div and links div inside the top div. The logo div is set to float left, while the links div is set to float right. I have also given the top div a border of 1px red.

Now in IE7 this is displayed correctly while in FireFox and Opera it is not. I once came with this issue here, and Kravvitz suggested me to use the following hack from this website: http://www.csscreator.com/attributes/containedfloat.php. My question is; Is there another way how to do this without having to introduce that hack?

Also I have another question. In reality I am not going to have a border and background in the top section. I have set the width of the logo div to 150px and the width of the links div to 500px. 150px + 400px make up 550px which is the total width of the top div. This means that the content div is placed under the top div and not onto it. I have seen it work on both IE7 and FireFox, but do not know about IE6.0 and Opera!! However is this considered as correct?

My third (and final) problem is that I want my list to be aligned right! However it keeps coming to the left! How should I accomplish this with the current CSS I have?

Any comments are more then welcome.

Thanks and Regards
Sim085

I'm having some issues with my images showing up properly in IE6. They look fine in Safari & Firefox. Basically there is a container div and then individual divs that display an album cover along with a
description. In IE6, the images aren't in the divs, but are at the top. Anyone know what the fix is?


#container {
padding: 0px;
margin-top: 10px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
background: #333;
border: 0px;
text-align:center;
width: 635px;
}

#center {
padding: 10px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
background: #666;
border: 2px solid #000000;
text-align:left;
width: 610px;
}

#container p.album-cover {
float:left;
padding:0;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 10px;
margin-left: 0px;
}

#container .album-info {
... just font properties;
}

Code:

<?php loop through albums to display each one; ?> 
<div id="center"> 
   <p class="album-cover"> 
      <?php <a href="..."><img src="..." ></a> ?> 
   </p>        
        
   <p class="album-info"> 
      <?php ..description... ?> 
   </p> 
</div> 
?>

I'm having a problem where my submit button isn't floating over to the right inside of the div. It's supposed to be inside of the "test" div, but it's just below it. I thought that if I floated an element it would expand the parent element when necessary. What am I missing? This is just a test snippet I was working with to get this functionality to work correctly. Is there a different way I should be trying to achieve this?

I've got a form that I'm floating the labels to the left so they lineup properly with their related input. I then want to float the submit button over to the right of the form, but that's when it jumps outside of the div just below it.

Code:
html

<div id="mainT">
	<div id="test">
		<h4>Enter New Values and Submit</h4>
			<label>ID: </label>#URL.system#
			<input class="submitT" type="Submit" value="Submit">
	</div>
</div>

Code:
css

div#mainT{
   border:1px solid #CCC;
	margin-bottom:25px;
	width:600px;
	padding:10px;
	font-size:10px;
 	color:#000;
	background-color:#EEE;
}
div#mainT input.submitT{
	/*margin:0 0 0 15px;*/
	float:right;
}
div#mainT label{
	width:120px;
	float:left;
	/*margin:0 0 0 15px;*/
}
div#test{
	border:1px solid red;
}

I thought I'd got this CSS stuff figured out but now I'm stuck again. I want the last div on this page to be alongside the one above it, but can I get the b****** thing to go there? No!

Link

I just want them side-by-side with a nice centered gap between them. Can you help?

Thanks,

John.

I've got two columns set-up using floats. They work fine in Firefox, Opera and Konqueror on my machine, but a friend with Windows informs me that it doesn't work properly in Internet Explorer.

The code is as follows:

Code:

div.get_content_voc_left {
 width: 50%;
 float: left;
 clear: both;
}
div.get_content_voc_right {
 width: 50%;
 float: right;
 clear: none;
}

The results in IE can be seen in this screenshot and this screenshot.

Those with IE can have a look at a live copy of the HTML here and the CSS here.

Any help is appreciated

I'm using float:left for my left nav bar, and then clear:both for my footer. Trouble is, I need to use some content boxes that will be using floats and then clears, however, when I use clear:both in my content box, it clears EVERYTHING (meaning it pushes below my navbar, because the navbar is quite long). Is there a workaround or am I using floats/clear wrong?

TIA
Javashackgirl

Hi Guys,

I am having a problem with floats.

Here is the code I am using:

Code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:900px; border: 1px black solid; float:left;">
<div style="width:400px; height:100px; border: 1px black solid; float:left; display:inline; background-color:blue;"></div>
<div style="width:400px; height:300px; border: 1px black solid; float:left; display:block; background-color:green;"></div>
<div style="width:400px; height:100px; border: 1px black solid; float:left;display:inline;  background-color:red;"></div>
</div>
</body>
</html>

I am trying to get the red box to appear right under the blue box. I don't want to use a 2 column layout. Is this possible?

Thanks!
Elad

Hi,

My current code is designed to have a flexible number of columns depending on the width of the screen. It is just divs with a left and right margin:

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>

<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
<div><img src="1.jpg" alt="Angry face" title="Angry face" /></div>
</body>
</html>

CSS:
Code:

div{
width:120px;
height:90px;
float:left;
background:#999999;
margin-left:3%;
margin-right:3%;
margin-bottom:13px;
border-style:solid;
border-width:1px;
border-color:#e2e2e2;
}

The trouble is, the right column isnt spaced correctly to the right side of the browser. Ive included an image to show more accuratly what im hoping to achieve.

Can anyone help me with this?