Using float: left and margin: auto in combination Safari 5.1.5

Page 1 of 1

3 Replies - 1086 Views - Last Post: 01 October 2012 - 10:18 PM

#1 jwhuebert  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 3
  • Joined: 29-September 12

Using float: left and margin: auto in combination Safari 5.1.5

Posted 29 September 2012 - 11:38 PM

I'm trying to show two divs in a row, centered equidistantly apart. Currently they are both left-aligned, I feel like I've done this before but not in safari and I'm not sure if I'm missing something obvious or what is wrong. I've tried looking at search results and as far as I can tell I'm doing this correctly. I've tried setting the margin of the container div to auto, I've experimented using margin: 0 auto, margin: auto, margin: 0 auto 0 auto; and none of those makes a difference. On my two inner div's I have float: left and margin: auto, when I remove float: left then it will center them, but they will be stacked instead of in a row, which is what I expect. What I can't understand is why adding float: left is causing these to be left aligned?
I've added a screenshot and the html / css I'm using. Any help would be greatly appreciated. Thanks, Wes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>What's wrong here?</title>
	</head>
	<body>
		<div style="width: 100%; padding: 5px 0px 0px 0px; height: 30px; border: 1px solid red;">
			<div style="width: 40%; height: 25px; float: left; margin: 0 auto; border: 1px solid blue;">
				&nbsp;
			</div>
			<div style="width: 40%; height: 25px; float: left; margin: 0 auto; border: 1px solid blue;">
				&nbsp;
			</div>
		</div>
	</body>
</html>


Attached Image

Is This A Good Question/Topic? 0
  • +

Replies To: Using float: left and margin: auto in combination Safari 5.1.5

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: Using float: left and margin: auto in combination Safari 5.1.5

Posted 30 September 2012 - 11:41 PM

View Postjwhuebert, on 30 September 2012 - 08:38 AM, said:

What I can't understand is why adding float: left is causing these to be left aligned?

wtf? they are left aligned because float is supposed to do exactly that. what else would you expect when you float something to the left side?


View Postjwhuebert, on 30 September 2012 - 08:38 AM, said:

I've tried setting the margin of the container div to auto, I've experimented using margin: 0 auto, margin: auto, margin: 0 auto 0 auto; and none of those makes a difference.

why should margin: auto yield anything besides 0? and that there is no space between the <div>s with a zero margin should be obvious. have you tried to set a non-zero margin yet?


PS. look into display: inline-block
Was This Post Helpful? 1
  • +
  • -

#3 jwhuebert  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 3
  • Joined: 29-September 12

Re: Using float: left and margin: auto in combination Safari 5.1.5

Posted 01 October 2012 - 06:34 PM

Inline-Block is what I needed. I don't really understand how to make a liquid layout without using margin: auto. When I have only one div on the page and I add margin: auto it will center it on the page. I guess I thought the same logic would apply. I ended up adding two more div's each with 50% width, and then my other divs with margin: auto inside of them to center them.

Not sure I understand it still, but I'll keep messing around with it. Thanks for your help!
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: Using float: left and margin: auto in combination Safari 5.1.5

Posted 01 October 2012 - 10:18 PM

View Postjwhuebert, on 02 October 2012 - 03:34 AM, said:

I don't really understand how to make a liquid layout without using margin: auto.

that only works if width and padding are less than the available horizontal space. and (probably) if the element is in the normal layout flow.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1