Question

I’m very new to XHTML and CSS and I can’t get the floats to work. Somehow I keep ending up with “fondo_header” below and on the right hand side of “wrapper”.

This is the HTML code:

<div id="header">
        <div id="wrapper">
            <div id="figure">
                    <img src="images/logo_2nd_225x1182_forWeb.jpg" alt="Logo" width="225" height="118">

            </div>
        </div>
            <div id="fondo_header">
                <div id="nav">
                    <ul>
                        <li><a href="#">Inicio</a></li>
                        <li><a href="#">Servicios</a></li>
                        <li><a href="#">Contacto</a></li>
                        </ul>
                </div>
            </div>

</div>

And the CSS:

#header{
    margin-top: 20px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
       }

#fondo_header{
       width: 74%;
       float: right;
       background: url(images/header.jpg);

       }

#wrapper{
    width: 250px;
    /*float:left;*/
    height:auto;
    background-color:#f2dfce;
        }

I need to put “wrapper” and “fondo_header” right next to each other. The width for all divs should be correct, I’ve also tried pixels, different widths, adding margins, padding, different floating styles and way too many things but nothing works.

I’ve tried IE9, Chrome and FF with the same results. Margins and paddings have been reset.

I’m pretty sure I’m overlooking something pretty obvious at this this point.
Any help much appreciated.

Answer 1

in case ur using floating
the floating element’s width should not exceed width of container else one will go on the second line

in ur case 74% for fondo_header + 240px for wrapper is greater then width of header
u can fix that by setting width of wrapper to 26%

or setting static values for both