Is there an alternitive to 'Float:Center'

This is a discussion on "Is there an alternitive to 'Float:Center'" within the Web Page Design section. This forum, and the thread "Is there an alternitive to 'Float:Center' are both part of the Design Your Website category.



 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page Is there an alternitive to 'Float:Center'

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1  
Old Apr 12th, 2007, 12:51
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,759
Thanks: 0
Thanked 13 Times in 13 Posts
Smile Is there an alternitive to 'Float:Center'
Hi, i have looked about the CSS forum for a little while now to see if anyone has posted this recently but i never found anything.

My question is, is there any way that you can 'float' center?

You can see my problem here: http://marc-online.co.uk

Thanks in advance

Marc.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Apr 12th, 2007, 12:54
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Is there an alternitive to 'Float:Center'
Well ... given the fact that float: center; (it's left, right or none) doesn't exists I'll say yes but ... what are you trying to achieve?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Apr 12th, 2007, 12:58
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,759
Thanks: 0
Thanked 13 Times in 13 Posts
Re: Is there an alternitive to 'Float:Center'
i am trying to get the main content (big box) to line up with the left side of the marc-online head and the little side box to lign up with the right hand edge of the marc-online header. do i have to put padding in at the sides of them to achieve this?

Thanks,
Marc.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Apr 12th, 2007, 13:13
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Is there an alternitive to 'Float:Center'
Well ... you're problem is with this

Code: Select all
<div id="topimage"/>
<div id="mainlink"/>
<div id="maincontents"/> <div id="sidebar"/>
You can't do that. If they're empty just

Code: Select all
<div id="topimage"></div>

<div id="mainlink"></div> 
<div id="maincontents"></div>
<div id="sidebar"></div>
So basically the site is centered horizontally right? So ... create are wrapper div

How to cdenter your site horizontally

Then just float your #maincontents left and #sidebar to the right. Don't forget to give them widths too.

You might want to have a look at my sticky in the Beginners Resources section ... the same one as in my sig for examples on how to achieve 2-column layouts.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Apr 12th, 2007, 13:20
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,759
Thanks: 0
Thanked 13 Times in 13 Posts
Re: Is there an alternitive to 'Float:Center'
have a look now. I have floated the big one to the left and the litte one to the right, but the little one stays in the big one! ill give a go what you just said.

Thanks again.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Apr 12th, 2007, 13:22
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Is there an alternitive to 'Float:Center'
You didn't change your HTML like I told you to.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Apr 12th, 2007, 13:24
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Is there an alternitive to 'Float:Center'
Also ... ditch the table for the menu. A menu is a list so use the <ul> <li> ...

CSS Design: Taming Lists
Pure CSS rollovers without Javascript

Loose the absolute positioning on the #menu too ...

And add the centering wrapper.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Apr 12th, 2007, 13:34
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,759
Thanks: 0
Thanked 13 Times in 13 Posts
Re: Is there an alternitive to 'Float:Center'
Check to see what youve said i have done correctly, because if i have done what you said that isnt going to work, i want my menu horazontaly. http://marc-online.co.uk

Ive found out how to center things, if anyone needs it:
Code: Select all
 margin-left: auto;
margin-right: auto;
Last edited by Marc; Apr 12th, 2007 at 13:37.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old Apr 12th, 2007, 13:39
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Is there an alternitive to 'Float:Center'
Wow ... I'm not sure how else I can say this so I'll quote it again! Maybe if I added color and some bold

Quote:
Originally Posted by karinne View Post
Well ... you're problem is with this

Code: Select all
<div id="topimage"/>
<div id="mainlink"/>
<div id="maincontents"/> <div id="sidebar"/>
You can't do that. If they're empty just

Code: Select all
<div id="topimage"></div>

<div id="mainlink"></div> 
<div id="maincontents"></div>
<div id="sidebar"></div>

And what the heck is
Code: Select all
<li><ul>
?!!? You didn't check the link I gave you AT ALL! Here's another one

http://cssplay.co.uk/menus/index.html

Your basic 2 column centered layout should look like this

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
</head>

<body>
<div id="wrapper">

<div id="header"></div>

<div id="navigation"></div>

<div id="maincontent"></div>

<div id="sidebar"></div>

</div>
</body>
</html>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #10  
Old Apr 12th, 2007, 13:48
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,759
Thanks: 0
Thanked 13 Times in 13 Posts
Re: Is there an alternitive to 'Float:Center'
lol, no offence but you make no sense whatsoever to me, i am 13 years old and i started doing CSS yesterday!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #11  
Old Apr 12th, 2007, 13:53
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Is there an alternitive to 'Float:Center'
Good grief! Just READ the posts, go to the link I gave you and read and learn ... I pretty much gave you all your solutions short of re-doing the site for you.
Last edited by karinne; Apr 12th, 2007 at 13:56.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #12  
Old Apr 12th, 2007, 13:54
Most Reputable Member
Join Date: May 2006
Location: North West, UK
Age: 22
Posts: 1,173
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Is there an alternitive to 'Float:Center'
First thing to do is tell us exactly what layout you are trying to achieve so we can help you better, becasue I haven't got a clue what exactly you're trying to do. A diagram would be great.

Something that will help is to fill the content boxes with some text. Go here to generate some random text. It will fill out the divs if they ahven't got width and height set.

Pete.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #13  
Old Apr 12th, 2007, 14:03
Marc's Avatar
Staff Manager

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Posts: 1,759
Thanks: 0
Thanked 13 Times in 13 Posts
Re: Is there an alternitive to 'Float:Center'
ive fixed it
http://marc-online.co.uk the buttons are a bit skewed up in IE, i dont know why, but thats 1 problem solved. i had:
Code: Select all
<div id="maincontents"/>
<div id="sidebar"/>
it wasnt closing the div so that is why the two boxes were going inside each other.

now i have got:
Code: Select all
<div id="maincontents"></div>
<div id="sidebar"></div>
Last edited by Marc; Apr 12th, 2007 at 14:07.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #14  
Old Apr 12th, 2007, 14:12
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Is there an alternitive to 'Float:Center'
Quote:
Originally Posted by mmfraser View Post
Ive found out how to center things, if anyone needs it:
Code: Select all
 margin-left: auto;
margin-right: auto;
Well ... again ... if you would have read Post #4 and the links provided, you would've had that answer already.

Code: Select all
margin: auto;
no need for margin-left and margin-right.

Quote:
Originally Posted by mmfraser View Post
ive fixed it
http://marc-online.co.uk the buttons are a bit skewed up in IE, i dont know why, but thats 1 problem solved. i had:
Code: Select all
<div id="maincontents"/>
<div id="sidebar"/>
it wasnt closing the div so that is why the two boxes were going inside each other.

now i have got:
Code: Select all
<div id="maincontents"></div>
<div id="sidebar"></div>
Now... again ... if you would have read posts #4 and #9 you would have knows this!

Again ... your menu should be a list

Code: Select all
<div id="navigation">
<ul>
  <li><a href=""><span>Home</span></li>
  <li><a href=""><span>Forum</span></li>
  <li><a href=""><span>DAFC News</span></li>
  <li><a href=""><span>Pictures</span></li>
  <li><a href=""><span>Links</span></li>
  <li><a href=""><span>Contact Us</span></li> 
  <li><a href=""><span>News Archives</span></li> 
  <li><a href=""><span>Site Login</span></li>
<ul>
</div>
css would be something like

Code: Select all
#navigation ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

#navigation ul li {
   float: left;
   height: 25px;
}

#navigation ul li a {
    display: block;
    text-decoration: none;
}

#navigation ul li a span {
   display: none;
}

#navigation ul li a.home {
   background: url(home.jpg) no-repeat 0 0;
   width: 50px;
}
#navigation ul li a.home:hover {
   background: url(home.jpg) no-repeat 0 -25px;
}
Last edited by karinne; Apr 12th, 2007 at 14:16.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
float center floatcenter

« navigation links not inside border | Best way to start »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Css Float??? RZX Developer Web Page Design 4 Aug 13th, 2007 10:37
Center a Swf Help?? nutbolt Web Page Design 20 Apr 9th, 2007 10:21
just want to center this ragingmon Web Page Design 9 Dec 29th, 2006 18:07
Problems with float:left float:right nvidiajoe Web Page Design 8 Nov 17th, 2006 20:24
IE6 Float masonbarge Web Page Design 8 Aug 16th, 2006 10:13


All times are GMT. The time now is 13:43.

Contact Us - Web Design & Development Forums - Archive - Top

Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Online Casino :: Web Hosting :: Football Betting :: Web Development India :: Football Stats :: Free Bets :: Extreme Clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Search Engine Optimisation :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20