Web Develop Forum: Clear:both; is not always needed! - Web Develop Forum

Jump to content

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

Clear:both; is not always needed! Rate Topic: -----

#1 User is offline   Sam Granger Icon

  • Administrator
  • PipPipPip
  • Group: Root Admin
  • Posts: 431
  • Joined: 22-October 08
  • Gender:Male

Posted 14 December 2009 - 12:17 AM

One thing I see quite often see when viewing tableless site codes is bump into the well known <br class='clear' />.

Using a clear: both; however isn't always needed and adds an extra useless element to the dom. If you have a 2 column layout for instance contained by a div, you can use the following code to the container:

#container {
    width: 100%;
    overflow: hidden;
}


It might seem like a small tip but it sure does make your code cleaner!
0

#2 User is offline   Randy Icon

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 35
  • Joined: 13-December 09
  • Gender:Male

Posted 02 January 2010 - 08:41 PM

Usefully tip but if you have something you want to overflow on purpose say a gradient behind a logo and you wanna align the logo better, it would cut if off if its in the same container so you would need to create multiple containers one just for the logo.
0

#3 User is offline   Sam Granger Icon

  • Administrator
  • PipPipPip
  • Group: Root Admin
  • Posts: 431
  • Joined: 22-October 08
  • Gender:Male

Posted 02 January 2010 - 09:41 PM

Specify a width and you should be alright, again, maybe I'm thinking of a different layout than you. But again, it doesn't work well in all cases, where a clear:both works best. I just try and keep that to a minimum where possible :)
0

#4 User is offline   Randy Icon

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 35
  • Joined: 13-December 09
  • Gender:Male

Posted 02 January 2010 - 09:53 PM

My design is something along the lines of this:

Posted Image

It cuts off the side of my logo :) I understand it doesn't work in all like you said just letting other people know a time when it does not work.
0

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