• 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

    • They did remove the Start button with Windows 8, but everyone had their pitchforks out. That OS had its many issues, but you could work on a desktop environment without the Start. Safe to say not many liked it.
    • I always just assumed that how I start programs is pretty close to how most people do it, which is... 1)Either start a program from desktop icon. or... 2)Windows key (or mouse click on start menu) and when start menu appears type in a little of what program you are trying to find, it will highlight, then press enter (or find it with mouse pointer and click it) is the very basic idea. this is very basic core functionality I would never change since it's quick and to the point and just works and has been this way a long time now. NOTE: I am on Linux Mint 22.1-Xfce (I am using the 'dark' menu since the default light grey is a bit out of place with the rest of Mint's darker look), but the very basics like this are the same as Windows in this regard. I like how Mint tends to pretty much stay the same (minor tweaks from point release to point release that are slight but overall it's pretty much the same) instead of change for the sake of change like Windows does and ends up making some stuff potentially worse as a result. I say screw all of those trends where something has to 'look current' as I am more of the mindset once something looks good enough, which Mint does (along with say Windows 7's core interface and the like), you don't screw with it as if someone does want to mess with it, they can do their own custom tweaks on the side, but the base install should be like that 'old faithful' type of interface that everyone has been familiar with for decades now. so by that standard the 'Start Menu' is still useful. I would NEVER get rid of that core functionality as Win8 pretty much tried that upon release and it made doing VERY basic stuff a chore which is why after I briefly tried Win8 in a VM, I never bothered with that OS again as that was easily Microsoft's biggest mess up with interface changes and I have been using Windows since v3.11 in mid-1990's and that Win8 interface change was by far the biggest mess up from Microsoft (how that made it to the final product is beyond me). I realize they supposedly fixed it in Win 8.1, but by then no one really cared as Win7 was the standard and those moving on from that went to Win10.
    • i click a few things on the start menu, other wise I do still use the run box daily.
    • That article title has a typo, it's supposed to say "Do I even need it?" And... I would not have wasted time writing a full article on a software [or feature] analysis based on exactly 1 user experience.
    • Lots of people use it without having an angsty Gotterdammerung.
  • Recent Achievements

    • Week One Done
      Wayne Robinson earned a badge
      Week One Done
    • One Month Later
      Karan Khanna earned a badge
      One Month Later
    • Week One Done
      Karan Khanna earned a badge
      Week One Done
    • First Post
      MikeK13 earned a badge
      First Post
    • Week One Done
      OHI Accounting earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      679
    2. 2
      ATLien_0
      275
    3. 3
      Michael Scrip
      207
    4. 4
      +FloatingFatMan
      171
    5. 5
      Steven P.
      148
  • Tell a friend

    Love Neowin? Tell a friend!