Monday, August 10, 2009

Placing Two DIVs Side-by-Side using CSS

There is a little CSS trick needed when placing two HTML elements or DIVs side-by-side in order to prevent the two elements from jumping out of the containing DIV. In this simple demonstration there is an 'outer' DIV containing a 'header' DIV containing a 'title' DIV and a 'search' FORM. The FORM could just as well be a DIV for this to work. The title and search are forced left and right using 'float:left' and 'float:right' respectively. The trick is to add a third DIV after the search FORM inside the header DIV with a CSS 'clear:both' styling: <div style="clear:both;"></div>.




<style type="text/css">

#outer {
    margin:0 auto;

#header {
    padding:5px 10px;



<div id='outer'>
    <div id='header'>
        <div id='title'>
            <p>Website Title</p>
        <form id='search' method="get">
            <input type="text" name="searchText" />
            <input type="submit" value="Search" />
        <div style="clear:both;"></div>

Piece of Cake!!

1 comment:

emran Talukder said...

thank you sooooo much! this is great tip! i was stuck for a whole hour on css formatting!!!! div is a must!
take a look at my site. 1 down, more to go...