Getting a div to clear only 1 of 2 left-floated elements

Hi, I am working on a fake little product page where it shows a list of products, and for each product it shows its name, a picture of it, a description, and the rating.

I uploaded the page to my clients server (shhh) here,
and here is a screenshot.

Now as you can see from the page, the description wraps around the product name and info, but I cannot do "clear: both" or "clear: left" for the description div because it will clear the image too. Is there any way to get the text to drop down past the name but not the image?

Thanks in advanced,
helimeef

P.S. the CSS is kind of messy because I haven't optimized it yet.

Dec 18 '07 #1

Subscribe Post Reply

1592

drhowarddrfine

7,435

Expert 4TB

I don't think you need all that:
[HTML]<body>

<img src="office.jpg" class="rating">
<img src="products_files/rifle_small.png" style="float:left">
<h1>Crosman Soft Air SWAT Kit</h1>
<p style="float:left"><span class="price">$74.99</span><span class="available">2 in stock at nearest store (Oldsmar, FL)</span></p>

<p style="clear:both">
The Crosman Soft Air SWAT kit is great for beginner airsofters who want a
stable gun while being stealthy and powerful at the same time. The
shotgun-like rifle included has great impact and can take out multiple
players at once, and the pistol pulls through as your last resort if
you run out of ammo. Also includes goggles, 4,000 .2 gram BBs, a spare
magazine, and a removable stock.
</p>

<div class="extender"></div>
</body></html>[/HTML]
btw, I used to run the largest airsoft game in the Midwest. "The Art of War"

Dec 19 '07 #2

helimeef

I don't think you need all that:
[HTML]<body>

<img src="office.jpg" class="rating">
<img src="products_files/rifle_small.png" style="float:left">
<h1>Crosman Soft Air SWAT Kit</h1>
<p style="float:left"><span class="price">$74.99</span><span class="available">2 in stock at nearest store (Oldsmar, FL)</span></p>

<p style="clear:both">
The Crosman Soft Air SWAT kit is great for beginner airsofters who want a
stable gun while being stealthy and powerful at the same time. The
shotgun-like rifle included has great impact and can take out multiple
players at once, and the pistol pulls through as your last resort if
you run out of ammo. Also includes goggles, 4,000 .2 gram BBs, a spare
magazine, and a removable stock.
</p>

<div class="extender"></div>
</body></html>[/HTML]
btw, I used to run the largest airsoft game in the Midwest. "The Art of War"

Well when I do that, it clears the image too. I want the description to be up against the name and other info.
Thanks for the help though, this gave me the idea to redo my code and make it cleaner. Hopefully I can fix it after I do that.

Heres what I came up with:

Expand|Select|Wrap|Line Numbers

 
<div class="product">

<img src="/rifle_small.png" />
 
<div class="prod_info">

<h1>Crosman Soft Air SWAT Kit <span>$74.99</span></h1>

<p>The Crosman Soft Air SWAT kit is great for beginner airsofters who want a stable gun while being stealthy and powerful at the same time. The shotgun-like rifle included has great impact and can take out multiple players at once, and the pistol pulls through as your last resort if you run out of ammo. Also includes goggles, 4,000 .2 gram BBs, a spare magazine, and a removable stock.</p>

</div>
 
<div class="extender"></div>

</div>

and the new and improved CSS:

Expand|Select|Wrap|Line Numbers

 
body {

    font: 1em Arial, Helvetica, sans-serif;

    padding: 1em;

    color: #333;

}

.product {

    margin: 1em;

    font-size: .8em;

    border: 1px solid #aaa;

    padding: 1.5em;

}

.product img {

    float: left;

}

.product .h1 {

    display: inline;

}

.product h1 span {

    font-size: .6em;

    color: #aaa;

    vertical-align: text-top;

}

.product .prod_info {

    margin-left: 1em;

}
 
/* Make sure product wrapper reaches extends past floated divs */

.product .extender {

    clear: both;

    visibility: hidden;

}

However the margin-left on the .product .prod_info does not seem to do anything. I set it to 80em and it moved a lot. I'm not sure what's wrong. margin-top works. I used the current element outline in the web developer toolbar addon for firefox, and I still can't find out what's causing this.

Please help
Thank you.

BTW I am looking around for a new airsoft rifle, full auto with a red dot sight, do you know any good dealers/guns on the web?

Thanks again :)

Dec 19 '07 #3

drhowarddrfine

7,435

Expert 4TB

Idon'tknow what I did last night but I just flew in from Chicago and boy are my arms tired.

Play with this:
[HTML] <div>
<img src="../office.jpg" style="height:18px;width:50px;float:right">
<img src="../products_files/rifle_small.png" style="float:left">
<div style="margin:0 auto;width:80%">
<h1>Crosman Soft Air SWAT Kit</h1>
<p><span class="price">$74.99</span><span class="available">2 in stock at nearest store (Oldsmar, FL)</span></p>
</div>

<p>
The Crosman Soft Air SWAT kit is great for beginner airsofters who want a
stable gun while being stealthy and powerful at the same time. The
shotgun-like rifle included has great impact and can take out multiple
players at once, and the pistol pulls through as your last resort if
you run out of ammo. Also includes goggles, 4,000 .2 gram BBs, a spare
magazine, and a removable stock.
</p>

</div> [/HTML]

Even though we still own some airsoft gear, I'm not into it anymore and don't even have my dealer links anymore.

Dec 19 '07 #4

helimeef

Idon'tknow what I did last night but I just flew in from Chicago and boy are my arms tired.

Play with this:
[HTML] <div>
<img src="../office.jpg" style="height:18px;width:50px;float:right">
<img src="../products_files/rifle_small.png" style="float:left">
<div style="margin:0 auto;width:80%">
<h1>Crosman Soft Air SWAT Kit</h1>
<p><span class="price">$74.99</span><span class="available">2 in stock at nearest store (Oldsmar, FL)</span></p>
</div>

<p>
The Crosman Soft Air SWAT kit is great for beginner airsofters who want a
stable gun while being stealthy and powerful at the same time. The
shotgun-like rifle included has great impact and can take out multiple
players at once, and the pistol pulls through as your last resort if
you run out of ammo. Also includes goggles, 4,000 .2 gram BBs, a spare
magazine, and a removable stock.
</p>

</div> [/HTML]

Even though we still own some airsoft gear, I'm not into it anymore and don't even have my dealer links anymore.

Thanks!
too bad about the airsoft thing though :(

Dec 19 '07 #5

Similar topics

getting the page name

by: middletree | last post by:

How do I request the actual page name that I'm on? This is going to go into an include file, and depending on which page I'm on, I'd like to do different things. I'm looking for "pagename.asp"

ASP / Active Server Pages

floating divs and <br clear=all> problem in ie5 Mac

by: Olly | last post by:

I am using the following pure css layout with a header and footer: http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml The left column floats to the left of the main content (middle...

HTML / CSS

float/clear problem

by: Florian Brucker | last post by:

Hi! I've got a problem with float & clear. Take this example code: <div style=" width:100px; height:100px; background-color:#FF0000; float:left; margin:10px;"></div> <span...

HTML / CSS

IE float clear div question

by: Pau Roldan | last post by:

Hi, sorry if this has been asked previously, but I couldn't find a suitable answer in previous posts. Here is a sample page illustrating the problem:...

HTML / CSS

Help: getting javascript & c# to talk together in asp.net web application

by: Alex | last post by:

Hi all, I'm writing a small web application which searches a database based on a date field, and populates a datagrid control with the results. The datagrid control has selection buttons added...

ASP.NET

Can't get my clear to work, would really appreciate it if someone would review my code!

by: laurakr | last post by:

I am trying to use a clear to get my bottom nav bar below the quote box on the right, but it isn't working. I would like the bottom edge of the quote box to "stick" to the footer nav bar but copy...

HTML / CSS

Getting and using current page URL

by: simbarashe | last post by:

Hie could someone please help me with getting and using the current page url. I have a function that gets the url, I want to use it with header(location : XXX) but it wont work. The code is as...

PHP

[VB6] Getting HTML Strings from a Web Page

by: bugmenot | last post by:

So I want to get some text from a web page and get it to show up in my program. Here's the part that has what I want: <div style="float: right; clear: right; background: #1daa42; color: #FFF;...

Visual Basic 4 / 5 / 6

Getting Mac 'column view' style nested div's to offset horizontally when overflowing

by: bugboy | last post by:

I'm building an interface like "column view" on a mac. I have nested <div> columns inside another <div> container which is set to 57% width of page. The nested div's act as columns which are...

HTML / CSS

Getting type mismatch error '[string : " "]'

by: vikas251074 | last post by:

I am getting error above in following code since few days giving tension day and night. How can I solve this? I am facing since Oct.25. in line no. 362 After doing a lot of homework, I am...

ASP / Active Server Pages

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++