I've surrounded them with colors to easily identify them.

I want the green Div to pretty much appear where it is, and the yellow Div to appear to the right of it. A typical layout.

CSS is brand new to me (I started last night) so this is most likely an easy fix. Thank you for your time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
    <title>Infinium Solutions - Soluciones Empresariales</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="style1.css" rel="stylesheet" type="text/css"/>
</head>

<body>
    <div id="main">
        <div id="header">
            <div id="logo">                 
            </div>
            <div id="tagline">
            </div>              
        </div><!-- End of Header Div -->

        <div id="bodies">
            <div id="navigation">
                <ul>
                    <li><a href="index.html">Inicio</a></li>
                    <li><a href="acerca.html">Quienes Somos</a></li>
                    <li><a href="servicios.html">Servicios</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="contacto.html">Contacto</a></li>
                </ul>
            </div><!-- End of Navigation Div -->
            <div id="content">
                <h2>Infinium Solutions</h2>

                <p>Desarrollamos soluciones tecnologicas para que su empresa funcione con mayor 
                eficiencia.</p>

                <p>Cualquier empresa al momento de buscar una solucion de sistema, intenta buscar algo
                economico y que funcione. En Infinium nosotros nos enorgullecemos en poder decir que nuestros
                paquetes son unicos y creados con la facilidad de uso en  mente.</p>            
            </div><!-- End of Content Div -->       
        </div><!-- End of Bodies Div -->

        <div id="footer">           
        </div>
    </div><!-- End of Main Div -->          
</body>

And my CSS file:

body{

}

#main{
    border: 1px red solid;  
    width: 80%;
    margin-left: auto;
    margin-right: auto;     
    padding: 5px;   
    height: 950px;
}

#header{
border: 1px red solid;  
margin-bottom: 10px;
}

#logo{
border: 1px red solid;  
}

#tagline{
border: 1px red solid;  
}

#bodies{
    border: 1px navy solid;     
    padding: 5px;
    height: 700px;
}

#navigation{
    border: 3px green solid;
    float: left;
    height: 450px;

}

#content{
    border: 3px yellow solid;   
    float: right;   
}

Also, since #navigation is floated left, and #content is floated right; shouldn't they appear beside each other?

I'm under the impression that float, floats the item inside of the parent container, right? Since both are children of the same Div parent, shouldn't they arrange as I expect them too?

  • EDIT: What the heck; why does the picture on the right (the preview) show it working 100% correctly? I'm using Firefox and I get the yellow box directly underneath the green box. Is Firefox bugged? :\ Sergio Tapia Gutierrez over 6 years ago

1 answer

1
point

Give your floated elements widths that add up to less than the width of the container and they'll sit side by side. and give the container overflow:hidden and it'll wrap around its children.

Answered over 6 years ago by Tony Crockford