Float help

	Home Register Search Help Login

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Float help

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Float help

Page: [1]


vision2000 Posts: 541 From: USA Status: offline	Float help - 7/28/2005 11:32:21 Since you folks are so helpful.... Regarding: http://www.ihost-websites.com/horse/ 1. How do I float another box under the current menu box without pushing the images in the content down? 2. I managed to position the horse image next to the search box however when previewed in DWMX the page is hard to view (page elements are all over my screen). The page renders fine in FF and IE Did I write the css correctly to position this image or is their a better way to do it? Thanks a bunch.

Tailslide

Posts: 6758
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

RE: Float help - 7/28/2005 11:45:37

Floats have a habit of going screwy if you're not really careful.

There are different approaches - here's one:

HTML:

<div id="box1">
<ul id="navlist">
<li id="active"><a href="index.shtml" id="current">Home</a></li>
<li><a href="index.shtml">Grooming Tools</a></li>
<li><a href="saddles.shtml">Saddles, Bridles and Tack</a></li>
<li><a href="index.shtml">Gloves and Chaps </a></li>
<li><a href="#">Halters and Leads</a></li>
<li><a href="index.shtml">Leather Care </a></li>
<li><a href="index.shtml">Blankets and Pads </a></li>
<li><a href="index.shtml">Bandages and Wraps </a></li>
<li><a href="index.shtml">Stall and Stable </a></li>
<li><a href="index.shtml">Hoof Care and Polish</a></li>
<li><a href="index.shtml">Accessories</a></li>
<li><a href="index.shtml">Boots</a></li>
<li><a href="index.shtml">Site Map </a></li>
<li><a href="index.shtml">Contact Us <br />
</a></li>
</ul>
<img src="images/FTH_logo-comp27jsmall.jpg" alt="logo" width="60" height="54" />
<br />
</div>
<div id="box3">
<ul id="navlist">
<li id="active"><a href="index.shtml" id="current">Home</a></li>
<li><a href="index.shtml">Grooming Tools</a></li>
<li><a href="saddles.shtml">Saddles, Bridles and Tack</a></li>
<li><a href="index.shtml">Gloves and Chaps </a></li>
<li><a href="#">Halters and Leads</a></li>
<li><a href="index.shtml">Leather Care </a></li>
<li><a href="index.shtml">Blankets and Pads </a></li>
<li><a href="index.shtml">Bandages and Wraps </a></li>
<li><a href="index.shtml">Stall and Stable </a></li>
<li><a href="index.shtml">Hoof Care and Polish</a></li>
<li><a href="index.shtml">Accessories</a></li>
<li><a href="index.shtml">Boots</a></li>
<li><a href="index.shtml">Site Map </a></li>
<li><a href="index.shtml">Contact Us <br />
</a></li>
</ul>
<img src="images/FTH_logo-comp27jsmall.jpg" alt="logo" width="60" height="54" />
<br />
</div>

You'll notice I've just copied box 1's content for an example.

CSS:

#box3 {
		clear:left;
		float: left;
		width: 170px;
		border: solid 1px #9B6245;
		background-color: #fff;
		margin:5px 10px 10px 5px;
		padding:5px;
		}

The important bit there is the clear:left - otherwise the boxes will line up next to each other rather than above one another.

The other way would be to put a div around both left hand boxes and float that left - you then take floats and clears off the two contained boxes as they just sit one on top of the other in the "normal" flow of the page.

Both work - I tend to float bigger containers containing smaller boxes but see which works best for you.

_____________________________

Little Blue Plane Web Design | Land Rover project

(in reply to vision2000)


vision2000 Posts: 541 From: USA Status: offline	RE: Float help - 7/28/2005 12:01:45 Thank you...how do I prevent the images from being pushed down? see this page: http://www.ihost-websites.com/horse/index-new.shtml (in reply to Tailslide)


Tailslide Posts: 6758 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Float help - 7/28/2005 12:23:46 There may be an easier way than this but I'm just going off for dinner so it'll have to do!! If you stick the left hand boxes into a div called leftbox and float that left (take off the floats from the internal boxes). Then stick the right content into a box and float that right. Make sure you put a width on the floats (about 540px seems to work on the main content section). Put a clear:both on the bottomnav to push it past the two floats. It means a bit of extra mark-up - however you could then get rid of the divs around the navigation list - just apply borders etc to the #leftbox #navlist {whatever;} to cut down on markup. Maybe someone else will come up with an easier way - sorry! _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to vision2000)


vision2000 Posts: 541 From: USA Status: offline	removed - 7/29/2005 16:20:58 removed < Message edited by vision2000 -- 7/29/2005 18:03:27 > (in reply to Tailslide)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Float help

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts