Jump to content

Css multiple floats


Callum
 Share

Recommended Posts

Ok, Im still a newbie to CSS and html and am learning the float property. Currently have some Firefox issues with multipe floats and having internet explorer issues centering it. Ideally I would like all the content centered with a float either side.The deal is, in Internet Explorer both floats work fine ( they are either side of the text ), however it is not centering any of the items.However in Firefox, Only the float right is displayed next to the text, the other is undeneath the text. However this content is centered.I've probably made some stupid mistake can anyone tell me whats wrong?Here are some print screensIEInternet Expolorer print screenFFFirefox print screenOk here is the code, Don't worry it's short basic code:).

<html><head><style type="text/css">.body  {text-align:center;}.floatleft {              float:left;             margin: 0;             clear:left;   }.floatright {             float:right;             margin: 0;             clear:right;}   #n1          {             margin-right:auto;            margin-left:auto;              width:62%;           }</style></head><body><div id="n1"><img  class="floatright" src="DSC00182r.jpg" alt="Callum" width="150"/><img  class="floatright" src="DSC00174r.jpg" alt="Joe B" width="150"/><img  class="floatright" src="DSC00180r.jpg" alt="Charlie" width="150"/><img  class="floatleft" src="DSC00182r.jpg" alt="Callum" width="150"/><img  class="floatleft" src="DSC00174r.jpg" alt="Joe B" width="150"/><img  class="floatleft" src="DSC00180r.jpg" alt="Charlie" width="150"/>  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></div></body></html>

Thanks for the help :)Callum

Link to comment
Share on other sites

Sooo, if I understood correctly, what you want is to have a column of images on the left of the content, then the content, then another column of images to the right of the content, and have all those three parts centered in the page. Is that it?If it's so, then you are missing the concept of how to structure your HTML. The design is what determines how your HTML should be laid out or stacked.So, let's say what you want is what I described above, then your HTML could be something like this:HTML:

<div id="container">	<div id="left-column">Your left column pictures go here</div>	<div id="content">All your content goes here...</div>	<div id="right-column">Your right column pictures go here</div>	<div class="clear"></div></div>

And the CSS would be:CSS:

#container { margin:auto; /*This will center the container (and all its elements inside) to the center. This works in ALL browsers.*/ width:600px; /*The width can be in px or %*/}#left-column {	float:left;	width:100px;}#content {	float:left;	width:400px;}#right-column {	float:left;	width:100px;}.clear {	clear:both; /*The purpose of this declaration is to extend the height of #container all the way down by clearing the floats, otherwise it will stay 1px in height. This is mostly used for Firefox to display the #container correctly*/}

As you can see you don't have to necessarily float right an element unless you really need to. Floating your DIVs to the left will make them stand one next to the other.Remember to ALWAYS use a DIV to clear your floats like the example above.Hope this helps,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...