Web Design Forum: Centre floats with container? - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Centre floats with container?

#1 User is offline   EnzoAmata 

  • Advanced Member
  • PipPipPip
  • 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>

0

#2 User is offline   RoyReed 

  • Forum Newcomer
  • Pip
  • 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.
0

#3 User is offline   EnzoAmata 

  • Advanced Member
  • PipPipPip
  • 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?
0

#4 User is offline   RoyReed 

  • Forum Newcomer
  • Pip
  • 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?
0

#5 User is offline   EnzoAmata 

  • Advanced Member
  • PipPipPip
  • 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?
0

#6 User is offline   RoyReed 

  • Forum Newcomer
  • Pip
  • 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.
0

#7 User is offline   User54 

  • Advanced Member
  • PipPipPip
  • 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.
0

#8 User is offline   User54 

  • Advanced Member
  • PipPipPip
  • 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.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users