473,722 Members | 2,285 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS/DIV layout help please

4 New Member
Hi,

I have a div <div class="lrgBG">, followed by a footer div <div class="lrgFoote r">. I have an image and a table in the lrgBG div, image is floating left and the table is floating right.

the problem is, which you can see below is that in firefox the lrgBG div doesn't seem to be holding the IMG & Table, and not expanding to the height of them.

this is what i need help with please.

Looks correct in IE allthough CSS is wrong



This is in Firefox, the div container does not wrap round the image and table



page prob http://www.webfroot.co.uk/csshelp/auction-detail.html
css 1 http://www.webfroot.co .uk/csshelp/css/global.css
css 2 http://www.webfroot.co.uk/csshelp/css/layout.css

#rcont {
float: right;
height: auto;
width: 536px;
}

.lrgBG {
background-image: url(../images/auction-mainlayout/content-lrg-bg.gif);
height: auto;
width: 536px;
margin: 0px;
padding: 0px;
float: none;
clear: both;
white-space: nowrap;
}

h3 {

font-size: 10px;
text-align: right;
padding-right: 5px;
padding-top: 4px;
}

.lrgBG img {
height: 250px;
width: 250px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 8px;
float: left;
}

.lrgAuctionTabl e {
width: 250px;
float: right;
height: auto;
background-color: #FF9000;
}

.lrgFooter {
background-image: url(../images/auction-mainlayout/content-lrg-footer.gif);
background-repeat: no-repeat;
height: 17px;
margin: 0px;
padding: 0px;
}



<div id="rcont">
<!-- AUCTION DETAILS -->
<div class="lrgBG">
<h3> DETAILS </h3>
<img src="images/auction-images/ipodLRG.jpg" />
<table class="lrgAucti onTable" cellspacing="1" summary="This table is the basic information for the IPOD sale">
<caption>CAPTIO N FOR TABLE</caption>
<tr>
<th id="retailprice ">TH</th>
<td headers="retail price">TD</td>
</tr>
<tr>
<th id="sale">TH</th>
<td headers="sale"> TD</td>
</tr>
<tr>
<th id="enddate">TH </th>
<td headers="enddat e">TD</td>
</tr>
</table>
</div>
<div class="lrgFoote r"></div>
</div>

I hope I make sense, the images should get my problem across.
Thanks in advance
Ryan
Oct 12 '06 #1
5 4516
drhowarddrfine
7,435 Recognized Expert Expert
I don't know why but I'm having trouble with my dev tools right now.

The problem you are having is not Firefox but IE. Never assume that if something works in IE that there is something wrong with other browsers. In this case, IE is expanding content to include floated elements. Since floated elements are removed from the normal flow, this should NOT happen and this is a bug in IE. Firefox is behaving properly.

Now until I can figure out what's wrong with my dev tools, you need to google for "clearing floats".
Oct 12 '06 #2
kestrel
1,071 Recognized Expert Top Contributor
just validate the css and everything will be perfect
http://jigsaw.w3.org/css-validator/
Oct 12 '06 #3
Mr Brown
4 New Member
Hi

Thanks for your quick reply it's appreciated, I will check it out with the validation and look into clearing cheers.

While I am doing this any more posts are welcome =)

I did say in my post that my css was wrong, even though it looked right in IE :( :)

thanks again
Oct 12 '06 #4
Mr Brown
4 New Member
I have validated the xhtml and css which it has passed succesfully, cant see how that would have displayed the problem?
Oct 12 '06 #5
Mr Brown
4 New Member
after reading up on clearing floats I had found this code to resolve the problem.

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

-->

I would add the class .clearfix to the container holding the image & table.

I am not sure how compatable this fix is with browsers, i have i.e 6 firefox 1.5.0.7 netscape 7 & opera installed and it works fine.
Oct 12 '06 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

82
10683
by: Peter Diedrich | last post by:
The site design is pretty simple: ============================================ | Head | ============================================ | | | | | | | | | left | center | right | | | | | | | | |
39
5678
by: Zak McGregor | last post by:
Hi all Are there any good solutions to aligning form field names and input boxes without resorting to tables? I am struggling to do this nicely at the moment. Thanks Ciao Zak
47
9148
by: Neal | last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
4
5096
by: Rob Freundlich | last post by:
I have some servlet-generated tabular data that I need to present, so I'm using an HTML Table. In some cases, it can be quite large. I'm flushing the servlet output every N lines to push the data to the browser as it generates, and I've used "table-layout: fixed" for the table's CSS class. It works pretty well in Netscape (7.1 and higher) - the table is drawn pretty much as the rows are received by the browser. However, Internet...
15
2323
by: Tamblyne | last post by:
This problem has got to have a simple solution and I can't be the first person who has ever handled it. Perhaps Google is no help because I'm not using the right terms? (I did find one post on-point, but no one responded to it.) I have a two column layout with a header and a footer. If the "content" is longer than the "navigation", there is no problem. However, if the content is shorter than the navigation, the navigation menus...
3
1542
by: Samuel Shulman | last post by:
I am looking for good guidance for positioning controls on the form.document, it is absolute nightmare and I don't know where to begin Thank you, Samuel Shulman
14
4854
by: Anoop | last post by:
Hi, I am new to this newsgroup and need help in the following questions. 1. I am workin' on a GUI application. Does C# provides Layout Managers the way Java does to design GUI? I know that it can be done using the designer but I intentionally don't want to use that. The one reason is that you cannot change the code generated by the designer. The other could be that you have more free hand and control to design your GUI. 2....
0
1978
by: letsgetsilly | last post by:
I've been developing (or trying to) my first website in a 3-column + header + footer 100% equal-height CSS-only for the past few months because everyone says tables are a thing of the past. I still have been unable to come up with a clean 3 column layout that fits all of my needs (header, footer, stretches to 100% no matter what, and works in IE and FF) If anyone has a solid template on how to get all of this accomplished, please let me...
1
1603
by: gamernaveen | last post by:
Hi guys , please help me with this bug. the site (tell me other bugs if you find) http://web.acen.mobi/eoa/, there the iframe (the form content is the iframe) is not fitting with the layout , u know what I mean , the circles do not get connected. I have tried many things but its not just working , please help me fixing it. Also the footer , it is not adjusting properly , please help me guys , this is urgent. And also , is possible , give...
53
4128
by: brave1979 | last post by:
Please check out my javascript library that allows you to create any layout for your web page, nested as deep as you like, adjusting to width and height of a browser window. You just describe it in javascript object and that's all. No need to know CSS hacks, no need to clutter your html with tables. http://www.bravelayout.scarabeo.biz/Quickstart
0
8860
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8738
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9376
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9234
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9086
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6678
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5994
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3207
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2146
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.