Member Avatar for kevwood

Hi all thanks for reading,

I am having problems getting my padding to work how i would like. I have a the followinc code for my page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sonc Hydro</title>
<link rel="stylesheet" type="text/css" href="css/main_styles.css" />
<link rel="stylesheet" type="text/css" href="css/main_layout.css" />
</head>

<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>
                <br />
                <div class="body_panel">
                    <h4> main body 4</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 5</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 6</h4>
                </div>
                <div class="clear"></div>                
            </div>
            <div id="footer">
                <h4>address</h4>
            </div>
       </div>
    </div>
</body>
</html>

i would like the div class="body_panel" to have a padding around it but i am having no joy in getting it to work, i have the following css for the div tags

#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 : 5px;
    float : left;
}

i am getting padding on the inside of the body_main but then the padding around the body_panel will not work, take a look at the attached image for what i am left with.

i am not sure if i am causing a problem as i am trying to put padding on the body_main and then trying to then set the padding on the body_panel which i s a child of body_main (i think not to up on css), but even if i try to just set the padding on the body_main i am still not getting the padding around body_panel.

ant help with this would be really helpfully or even a pointer to a good tutorial which will show me the way forward with this problem.

screen-shot.gif 35.31 KB
  • 3 Contributors
  • 3 Replies
  • 288 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by matrixdevuk
Member Avatar for JorgeM

Based on your description, it sounds to me like what you want is space around the body_panel divs. If that is correct, padding is not the correct property to use. You need to use margin instead. update line 14 in your CSS sample above to be margin: 5px;

It helps to get a better understanding of the CSS Box Model

Edited by JorgeM
Member Avatar for kevwood

i was reading a little bit about the box model, when i put the margin on the body_panel of 5px if the div that it is in is set to 100% width then it will then be 100% +5px due to the margin.

when using the box model it takes into consideration that there is already a div set to 100% and keeps this at the same width instead of adding the 5px.

i have not seen this before i started to look into my problem it must be fairly new to css but then again i was never that good at css anyway php, mysql and other scripting languages where always my stonger point.

can you point me in the direction of a good tutorial on the box model function and it implementaion?

i will search also and post back if i get it to work or not.

thanks for the reply.

Member Avatar for matrixdevuk

I would recommend doing this:

<html>
    <head>
        <title>My Title</title>
        <style>
            body {
                /* your body styles here */
            }
            .wrapper {
                /* your wrapper styles here */
                width: 100%;
                height: 100%;
            }
            .mydiv {
                width: 800px;
                height: 20px;
            }
            .pad {
                /* Add your padding here! */
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="mydiv">
                <div class="pad">
                    My Text Here
                </div>
            </div>
        </div>
    </body>
</html>

I have not yet tested my code above, and it might not work 100%.

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.