Tags

redhat
employment
ripple
interfaces
ncurses
ruby
refs
filesystems
retro gaming
raspberry pi
sinatra
3d printing
nethack
gcc
compiler
fedora
virtfs
project
gaming
vim
grep
sed
aikido
philosophy
splix
android
lvm
storage
bitcoin
projects
sig315
miq
db
polisher
meditation
hopex
conferences
omega
simulator
bundler_ext
rubygems
book review
google code in
isitfedoraruby
svn
gsoc
design patters
jsonrpc
rjr
aeolus
ohiolinuxfest
rome
europe
travel
brno
gtk
python
puppet
conference
fudcon
snap
html5
tips
ssh
linux
hardware
libvirt
virtualization
engineering expo
cloud
rpm
yum
rake
redmine
plugins
screencasting
jruby
fosscon
pidgin
gnome-shell
distros
notacon
presentation
rails
deltacloud
apache
qmf
passenger
syrlug
hackerspace
music
massive attack
crypto
backups
vnc
xsd
rxsd
x3d
mercurial
ovirt
qpid
webdev
haikus
poetry
legaleese
jquery
selenium
testing
xpath
git
sshfs
svg
ldap
autotools
pygtk
xmlrpc
slackware

Oct 27 2009 webdev

A tip every web developer knew but me

Funny how the simplest things will slip by you (or at least you’ll forget and have to remind yourself from time to time).

Lets say you have two divs, one contained within another, where the child has some floating style and the parent does not. Depending on the amount of content in the parent and child divs, you may see it spill out of the parent like so:

Alot of content
goes in the child div
to illustrate the problem
 

Notice how the bottom border goes through the text. The markup to generate this is:

Alot of content
goes in the child div
to illustrate the problem
 

To fix this simply add a “<div style="clear:both;”></div>“ as the very last element of the container div like so:

Alot of content
goes in the child div
to illustrate the problem
 

Resulting in:

Alot of content
goes in the child div
to illustrate the problem
 

Read more on the subject