16 replies [Last post]
3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Hi, I'm having a problem again with my new site. I've made a product box which contains two divs, one floated left and one floated right. The right hand one appears below the left float, instead of to the right of it. The left hand div is fixed width, the right hand one I want to resize with the whole page.
Can anybody see where I'm going wrong?

You can view the code at:

http://www.3drom.co.uk/index.html
http://www.3drom.co.uk/index.css

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 14 years 48 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Right float appears below left float

looks fine in FF and IE

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

Sorry! I hadn't uploaded the new version to the server!
The old version looked fine but didn't use two separate divs for the content of the promotion boxes - it used one div within the box to hold the image, price and information and buy buttons, and then the rest of the text was just entered into the containing block (with the blue or red outline).

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

I've changed it a little to try to fix the problem: I've put promocontentleft inside promocontentright. Promocontentleft contains the product image, price, and info and buy buttons. Promocontentright contains the product title and description.
In IE it looks okay, but in Firefox there is a margin to the left of promocontentright, which shouldn't be there, and I can't work out why it's there!
(The 1 pixel black borders are just to help with positioning, and will be removed once I've got it working okay.)
Many thanks.

The specific code relating to this part of the page is:

/*This is the main blue outlined box with blue gradient background */
.floatpromo {
float: left;
background: url(images/gradblue2.gif) repeat-x;
border: 2px #80D0FF solid;
width: 99%;
height: 180px;
margin: 0 0 1em 0;
overflow: auto;}

.floatpromo p {
margin: 7px 0 0 0;
}

/*This contains the product title and description */
.promocontentright {
text-align: left;
height: 175px;
float: right;
margin: 0% 0% 0% 0%;
border: 1px solid #000000;
}

/*This contains the product image, price, and info and buy buttons */
.promocontentleft {
text-align: center;
width: 100px;
height: 165px;
float: left;
margin: 2% 2% 0% 1%;
border: 1px solid #000000;
}

.promocontentleft a img {
border: 1px solid #FFBBBB;
}

<!-- PROMOTION BLUE START -->

<div class="floatpromo">

<div class="promocontentright">

<div class="promocontentleft">

<a href="projector.html"><img alt="PROJECTOR" SRC="http://www.donkeyote.pwp.blueyonder.co.uk/3drom/images/cmw-103small.jpg"></a>

<div style="clear: both;">
</div>

<div class="price1">
£14.99
<br>
</div>

<div style="clear: both;">
</div>

<p></p>

<div class="subcattitle">
<div class="nav">
<ul class="current">


<li>
<a href="http://www.donkeyote.pwp.blueyonder.co.uk/3drom/lcd11.html">
More info
</a>
</li>


<li>
<a href="http://www.donkeyote.pwp.blueyonder.co.uk/3drom/buylcd11.html">
Buy
</a>
</li>

</ul>

</div>
</div>
</div>

<p></p>
<font class="producttitle">
LCD TV Wall Mount
</font>
<p></p>
<font class="productdescshort">
Suitable for any LCD screen up to 32"
<br>
For VESA mounts: 50x50mm, 75x75mm, 100x100mm
<br>
Holds up to 22.7kg (50lbs)
<br>
Flush mounting

</font>
</div>
</div>

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Right float appears below left float

Do I see Shock Font tags? <br>s?

Verschwindende wrote:
  • CSS doesn't make pies

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

Hi Pineapplehead, what should I put instead of the font tags and <br>s?
Do you know why the left hand margin is there in Firefox?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Right float appears below left float

Hey, I remember this site! Looking much better now, I must say Laughing out loud

You should be using semantic tags - use a heading tag for the product titles (h2 or h3) then apply the text styles directly to the paragraph. This way, you do away with the font tags AND the breaks.

ANd for the margin . . . I don't see it? Could you post a screenshot of what you're seeing?

I'm also getting scrollbars . . . maybe we could try getting rid of thise when not needed.

/edit

Simply removing overflow:auto; will remove the scrollbars.

Verschwindende wrote:
  • CSS doesn't make pies

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

Hi Pineapplehead, thanks for your help. I've fixed the problem with the left hand margin - I was using 'float: right;' for promocontentright, and I didn't need it. (I presume that was what was causing the left hand margin to appear by it).
I don't know why the scroll bar appears in the top left promotion box, I've been using
overflow: auto;
in the following code:

.floatpromo {
float: left;
background: url(images/gradblue2.gif) repeat-x;
border: 2px #80D0FF solid;
width: 99%;
height: 180px;
margin: 0 0 1em 0;
overflow: auto;}

The scrollbar didn't used to appear before, until the font size was increased in the browser, but now it's there all the time. Should I make promocontentright shorter? (Less height). I've tried this but it doesn't seem to work. I took it down to 165px (floatpromo which contains it is 180px) and it still had scrollbars!

I will change the tags to h2, h3 etc. as you say. I'm working my way through 'CSS Mastery' but I'm going to buy a more basic book today, as CSS Mastery doesn't address some of the basic layout issues I've been having.

It's a slow process, learning CSS!!!
Thanks for your comments about the site, much appreciated.

ps Ideally I would like each of the promotional boxes to increase in height when the text size is increased in the browser - do you know how I would do this?

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

Hi, I've removed:

background: url(images/gradblue2.gif) repeat-x;

from

.floatpromo {
float: left;
background: url(images/gradblue2.gif) repeat-x;
border: 2px #80D0FF solid;
width: 99%;
height: 180px;
margin: 0 0 1em 0;
}

to see if this would allow the height of floatpromo to grow, but it isn't working. Is this because 'gradblue2.gif' is 180px high, and the block only expands to fit the background graphic? I can easily make a 250px version of gradblue2.gif to help things. (I don't think it'll need to ever get bigger than that.)

I would like to keep the
overflow: auto;
selector, as I want the text to stay inside the floatpromo box if it gets much bigger, otherwise it spills out and looks a mess.

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

I've made a 250px version of gradblue2.gif, but this still doesn't work. If I remove the height value from floatpromo, it expands to 250px to contain the new 250px gradblue2.gif. I'm beginning to think that what I want isn't possible. I think I'll just change to a solid colour for the background, a light blue. Would this then allow the box to expand in height as the fonts grew in size?

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

Hi, I'm sorry to sound a bit thick again, but how do I make line breaks without <br>?
I've put the following code in:

.promocontentright h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
font-weight: bold;
color: #990000;
}

.promocontentright p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
color: #000000
}

What do I use instead of <br>?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Right float appears below left float

The background-image won't affect the height of the div, so don't worry about that.

If you give a div a specified height, and you resize the text, a scrollbar will appear UNLESS YOU SET OVERFLOW: HIDDEN;

If it has a height and the content doesn't overflow, a scrollbar won't appear.

Leave the heights as they were originally, just remove the overflow comment from .promofloat

Let me know when you're done Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

I'd like the boxes to have a scrollbar when needed though - if I can't make them grow bigger when the text size is increased.

Can you work out why the heading 'LCD TV Wall Mount' is set down from the top of promocontentright? I'm using h2 to set the font properties.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Right float appears below left float

To clarify.

If you give a box specific height, the scrollbar should appear automatically when the content is too large. IE or Firefox gets it wrong/right, I'm not too sure. However, using overflow: auto seems to put it there in Firefox, regardless of whether it's needed or not. This is confusing me Laughing out loud I'm off out now, I'll have another loko when I get back, unless someone else wants to jump in?

Verschwindende wrote:
  • CSS doesn't make pies

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

I've managed to fix it all now. I've got
overflow: auto;
and it's working just as I want it in Firefox.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Right float appears below left float

Looking good, you've come a long way with this Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

3drom
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Joined: 2006-01-25
Posts: 61
Points: 0

Right float appears below left float

Thanks! It's certainly been a lot more difficult for me to learn CSS, than learning HTML was!