• 0

CSS Problem


Question

I'm having a slight problem with CSS and browser compatibility. Basically, I have a main div box and several sub-boxes. The main div box has a min-height of 100px (meaning that it will be at least 100px tall, unless the content inside the box causes it to stretch vertically), and there is a sub-DIV box that is floated to the left. This sub-DIV box I want to have a min-height as well, so there isn't a gap between this sub-box and the bottom of the main DIV box.

Here is the code that I am using. I am fairly new to CSS, so there may be more efficient ways of doing things. Can someone give me a pointer to how I can fix this design flaw?

<div style="width: 560px; min-height: 100px; border: 1px solid #000000; background: #ffffff; z-index: 1; padding: 0px">
	<div style="width: 100%; height: 20px; padding: 0px; margin: 0px; border-bottom: 1px solid #000000; background: #613520">
		&lt;div style="float: left; height: 20px; width: 20px; border-right: 1px solid #000000; margin: 0px"&gt;&lt;img src="https://www.venture50.com/downloads/images/icons/package.jpg"></div>lt;div style="width: 20px; height: 20px; float: left; border-right: 1px solid #000000; margin: 0px"&gt;&lt;img src="https://www.venture50.com/downloads/images/icons/food.jpg"></div>lt;div style="width: 350px; height: 20px; float: left; border-right: 1px solid #000000; margin: 0px; background: #a17e54; line-height:20px; padding-left: 3px"&gt;Business Name&lt;/div&gt;
		&lt;div style="width: 161px; height: 20px; float: left; margin: 0px; background: #613520; line-height:20px; padding-left: 3px"&gt;Business Type&lt;/div&gt;
	&lt;/div&gt;

	&lt;div style="width: 210px; z-index: 1; min-height: 79px; float: left;display: inline; background: #ebe2d9; border-right: 1px solid #000000"&gt;
		Line of Text&lt;br /&gt;Line of Text&lt;br /&gt;Line of Text&lt;br /&gt;Line of Text&lt;br /&gt;Line of Text&lt;br /&gt;
	&lt;/div&gt;
	Some more text to the right...

&lt;/div&gt;

How it looks in Firefox and Safari (not working right):

post-14932-1134796081.png

How it looks like in IE (how it is supposed to look):

post-14932-1134796089.png

Thanks!

Link to comment
https://www.neowin.net/forum/topic/409122-css-problem/
Share on other sites

2 answers to this question

Recommended Posts

  • 0

i know there are issues with min-width in some browsers, but you should check out both

www.positioniseverything.net and

www.quirksmode.org

both sites have great info on browser compatibility in web design.

if your general goal however is just to have two columns of equal length, there are more effective ways to do so, with or without the use of 'faux columns'. Here's an ALA article:

http://www.alistapart.com/articles/fauxcolumns/

Avoiding faux columns means either using negative margins, as in this article:

http://positioniseverything.net/articles/o...out/equalheight

...or proper use of the 'height: 100%' rule. however, it would require you to know the height of the containing div, which i don't think you can in your case

Link to comment
https://www.neowin.net/forum/topic/409122-css-problem/#findComment-586932726
Share on other sites

  • 0

Works for me in FireFox 1.5.

I had to remove, border-bottom:white etc.. from the second div to get the border working right.. otherwise all good. :\ (I don't have a doctype though, perhaps thats it?)

Otherwise... throw in some <br style="clear:both" />'s after some of your floats to see if that helps. (usually works, but I'm not quite sure why :p)

Link to comment
https://www.neowin.net/forum/topic/409122-css-problem/#findComment-586933081
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • That's wonderful. A shame that a few fringe nutjobs will somehow concoct a story to make this something nefarious. I do wish he'd committed to using more of the foundation's funds for scientific/medical research here at home, though. It looks like the U.S. is suddenly poised to become a backwoods nation in research.
    • Scientists explain how water could have actually made Mars the red planet it is today by Sayan Sen For centuries, scientists have wondered why Mars is red. The long-standing theory was that the planet’s rusty color came from hematite, an iron-rich mineral formed in dry conditions. But new research suggests something else might be responsible: ferrihydrite, an iron oxide-hydroxide mineral that forms in wet environments. A study published in Nature Communications by researchers from Brown University and the University of Bern suggests that ferrihydrite (Fe5O8H · nH2O) is the dominant iron-containing mineral in Martian dust. Their findings—based on orbital observations, rover data, and lab experiments—challenge previous ideas about Mars' surface composition. “The fundamental question of why Mars is red has been thought of for hundreds if not thousands of years,” said Adomas Valantinas, a postdoctoral fellow at Brown University. “From our analysis, we believe ferrihydrite is everywhere in the dust and also probably in the rock formations, as well.” Ferrihydrite is formed when iron reacts with oxygen and water. On Earth, it’s commonly found in volcanic rock and ash. Its presence on Mars suggests that the planet was once much wetter, with conditions that could have supported liquid water. This contrasts with hematite, which forms in drier environments. To test their theory, the researchers recreated Martian conditions in a lab. They ground minerals into tiny particles—about 1/100th the width of a human hair—matching the size of real Martian dust. They then studied how light reflected off these particles. The results showed that ferrihydrite remains stable in Mars’ current dry, cold climate, but its structure still holds signs that it formed when the planet had water. “What we know from this study is the evidence points to ferrihydrite forming, and for that to happen there must have been conditions where oxygen and water could react with iron,” Valantinas explained. “Those conditions were very different from today’s dry, cold environment.” To confirm ferrihydrite’s presence, the team studied data from NASA’s Mars Reconnaissance Orbiter and ESA’s Mars Express and Trace Gas Orbiter. They also used spectral readings from rovers like Curiosity, Pathfinder, and Opportunity. Combining all of these sources, they found that the mineral appears widespread on the Martian surface. This discovery challenges previous theories that Mars gradually oxidized in dry conditions. Instead, it suggests that ancient Mars went through a wetter phase before drying out. That shift from a water-rich past to the dry, dusty planet we see today is key to understanding Mars’ climate history—and possibly its ability to support life. “The study is a door-opening opportunity,” said Jack Mustard, senior author of the study. “It gives us a better chance to apply principles of mineral formation and conditions to tap back in time.” While the findings provide strong evidence for ferrihydrite’s role in Mars’ red dust, definitive proof will have to wait until Mars samples—currently being collected by NASA’s Perseverance rover—are brought back to Earth. Scientists hope these samples will confirm the theory and shed more light on the planet’s environmental history. Source: Brown University, University of Bren, Nature | Image via Depositphotos This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing.
    • I would say 98% of people you can't figure out how to install Linux would never attempt to install Windows. It's not news non-tech savvy people can't install an PC OS.
    • Do I really have to tell you that people generally don't make random posts about how Windows is running perfectly for them? Of course you're seeing more posts about people hating Windows, it's just a very loud minority as usual.
    • ...and not really appropriate for most people for desktop usage.
  • Recent Achievements

    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter
    • One Month Later
      Marwin earned a badge
      One Month Later
    • One Year In
      fred8615 earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      237
    2. 2
      snowy owl
      156
    3. 3
      ATLien_0
      142
    4. 4
      +FloatingFatMan
      132
    5. 5
      Xenon
      131
  • Tell a friend

    Love Neowin? Tell a friend!