Member Avatar for kevwood

hi all not been here for a while, a long time since i have been working in the industry but ha life goes on haha.

I am stuck trying to get the layout to work exactly how i would like, i have a container div which i would like to hold a set of smaller divs (body panel) which are all lined up next to each other with. i have tried a few different ways to get them to sit next to each other but all have been no use up to now.

the closest i have got to getting it is using the float left function but this takes the smaller divs outside of the container div which is not usefull at all. i tried to use margins and padding but it all seems to fail which is rather annoying.

if anyone could point me in the correct direction as to where i am going wrong that would be great, here is the code i am using

<body bgcolor="#08a2c0">
    <div id="container">
        <div id="body">
            <div id="header">
                <h4>sonic hydro</h4>
            </div>
            <div id="nav">
                <h4>navigation</h4>
            </div>
            <div id="body_main">
                <div class="body_panel">
                    <h4>main body</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 2</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 3</h4>
                </div>                
            </div>
            <div id="footer">
                <h4>address</h4>
            </div>
       </div>
    </div>
</body>

and here is my css

#body_main{
    width : 95%;
    margin-left : auto;
    margin-right : auto;
    background-color : #96C;
    border-left : solid #FFF;
    border-right : solid #FFF;
    padding : 5px;
}

.body_panel{
    width : 25%;
    border : solid #FFF;
    padding-bottom : 2px;
    margin : auto;
}

also the padding on the bottom of the body_panel is not working, if anyone knows of a tutorial that would help me work through this that would be great thanks for reading and any help given.

  • 2 Contributors
  • 2 Replies
  • 194 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by kevwood
Member Avatar for JorgeM

Yes, that is because float takes the divs out of the normal flow, but you can use the clear property to help you with this problem. See this example so you can expand from it..

<!DOCTYPE html>
<html>
<head>
<style>
body{
    background-color:#08a2c0;
}
#body_main{
    width : 95%;
    margin-left : auto;
    margin-right : auto;
    background-color : #96C;
    border-left : solid #FFF;
    border-right : solid #FFF;
    padding : 5px;
}
.body_panel{
    width : 25%;
    border : solid #FFF;
    padding-bottom : 2px;
    margin : auto;
    float:left;
}

.clear{
    clear:both;
}
 </style>

</head>

<body>
    <div id="container">
        <div id="body">
            <div id="header">
                <h4>sonic hydro</h4>
            </div>
            <div id="nav">
                <h4>navigation</h4>
            </div>
            <div id="body_main">
                <div class="body_panel">
                    <h4>main body</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 2</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 3</h4>
                </div>  
            <div class="clear"></div>
            </div>
            <div id="footer">
                <h4>address</h4>
            </div>
       </div>
    </div>

</body>
</html>
Member Avatar for kevwood

thanks for the reply it has got the boxes positioned across the page but the padding around the box does not seem to want to work, any ideas as to why this is not working?

is the clear function cross browser compatible, css is all new to me as you can probably tell i like php and mysql more.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.