Centre floats with container?

#1 EnzoAmata

Advanced Member

Group: Members
Posts: 275
Joined: 21-April 09
Reputation: 3
Gender:Male
Experience:Beginner
Area of Expertise:I'm Learning

Posted 02 May 2009 - 01:29 AM

I thought this would make my float sit in the middle of my container but nooo....I'm sure there is a reason why and hoping you guys can help me out? As far as I'm aware floats don't follow the normal flow of the page that's why they are called floats but can I get it to act in accordance with the container?

Thanks.

<style type="text/css">
<!--
* { margin:0; padding:0 }
body { background-color:#F9F9F9 }
#container { width:960px; margin:auto; }
#button { width:401px; height:392px; background:url(images/button1.png) no-repeat; float:left; margin-left:50%; }
-->
</style></head>

<body>
<div id="container">
<div id="button"></div>
</div>
</body>

#2 RoyReed

Forum Newcomer

Group: Members
Posts: 29
Joined: 11-March 09
Reputation: 0
Location:London, UK
Experience:Advanced
Area of Expertise:Web Designer

Posted 02 May 2009 - 03:43 PM

margin-left: 280px; (half the width of the container minus half the width of the button div) should do it.

Or try margin: 0 auto; and drop the float.

#3 EnzoAmata

Advanced Member

Group: Members
Posts: 275
Joined: 21-April 09
Reputation: 3
Gender:Male
Experience:Beginner
Area of Expertise:I'm Learning

Posted 02 May 2009 - 03:55 PM

Thanks. I am wanting it to float as I don't want this object to interact with the flow of the page. That's one of the main reasons for using floats, right?

#4 RoyReed

Forum Newcomer

Group: Members
Posts: 29
Joined: 11-March 09
Reputation: 0
Location:London, UK
Experience:Advanced
Area of Expertise:Web Designer

Posted 02 May 2009 - 04:16 PM

Right, but you're not expecting any of the main content to appear where the float object margin is, are you?

#5 EnzoAmata

Advanced Member

Group: Members
Posts: 275
Joined: 21-April 09
Reputation: 3
Gender:Male
Experience:Beginner
Area of Expertise:I'm Learning

Posted 02 May 2009 - 04:22 PM

I don't know yet, I know the div is labelled button but in fact it isn't a button just typed that as it was the first word that came to mind when I was quickly typing the code into the post. What would you use floats for?

#6 RoyReed

Forum Newcomer

Group: Members
Posts: 29
Joined: 11-March 09
Reputation: 0
Location:London, UK
Experience:Advanced
Area of Expertise:Web Designer

Posted 03 May 2009 - 10:27 AM

You're pretty much there. If you float an object it removes it from the natural flow of the document. If you float to the right the text will flow around that object to the left. If you float it left, text flows round it to the right. What you can't do is float center and have the text flow around both sides.

#7 User54

Advanced Member

Group: Members
Posts: 250
Joined: 18-November 08
Reputation: 0
Gender:Male
Location:UK
Experience:Advanced
Area of Expertise:Designer/Coder

Posted 04 May 2009 - 08:18 AM

FLOAT - Can be used to float HTML elements left or right of eachother.

for example:

<div id='box1'>
</div>
<div id='box2'>
</div>

#box1 {
float: left;
width: 100px;
height: 100px;
}

#box2 {
float: left; /** or right **/
width: 100px;
height: 100px;
}

The above code would give you boxes next to eachother otherwise they would be under eachother.

Another example:

<div id='container'>

<div style='float: left'>
<img src='images/banner1' alt='banner1' title='banner1'></img>
</div>

<div style='float: left'>
<img src='images/banner2' alt='banner2' title='banner2'></img>
</div>

</div>

#container {
margin: 0 auto;
width: 1000px;
}

2 banners side by side, dependant on width of image and its container.

#8 User54

Advanced Member

Group: Members
Posts: 250
Joined: 18-November 08
Reputation: 0
Gender:Male
Location:UK
Experience:Advanced
Area of Expertise:Designer/Coder

Posted 04 May 2009 - 08:21 AM

Quote

margin-left: 280px; (half the width of the container minus half the width of the button div) should do it.

Or try margin: 0 auto; and drop the float.

Another way could be to create an "invisible" column 280px wide and 100% height floated left.

Padding and margins would be needed to align everything anyway but just to show theres more than one way.