...

View Full Version : Need some help with positioning DIVS



chiba
06-15-2012, 09:48 AM
Hi guys,
I'm building the site below, but I'm having trouble getting the div to sit in the centre of the page. I added padding to the main div , but it still sits right next to the header div and doesn't look neat. I want the main div where the text goes to sit away from the menu and header/banner. Any ideas?:confused:

http://www.davidstowe.co.uk


body
{
background-color:#E9E9E9;
font-family:"MS Serif", "New York", serif;
text-align: center;
}
/*html {
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}*/

#container {
width:900px;
height:auto;
margin-left: auto;
margin-right: auto;
color:#000;
}
#header {
display:inline-block;
float:left;
width:900px;
height:85px;
}

#header_top
{
width:900px;
height:55px;
background-color:#5c75a9;
text-shadow: 2px 2px #C0C0C0;
font-family:"MS Serif", "New York", serif;
color:#FFFFFF;
font-size:43px;
text-align:center;
letter-spacing:10px;
}
#header_middle1
{
width:900px;
height:2px;
background-color:#FFFFFF;
}
#header_middle2
{
width:900px;
height:1px;
background-color:#5c75a9;
}
#header_middle3
{
width:900px;
height:2px;
background-color:#FFFFFF;
}
#header_bottom
{
width:900px;
height:25px;
background-color:#5c75a9;
text-align:center;
font-family:"MS Serif", "New York", serif;
color:#FFFFFF;
font-size:22px;
letter-spacing:2px;
}

#menu {

float:left;
width:150px;
height:auto;
padding-top:5px;
}
#menu img
{
padding-bottom:5px;
}

#main {
padding:20px 10px 10px 10px;
float:left;
width:700px;
height:auto;
border-radius: 4px;
-webkit-border-radius: 4px;
background-color:#5c75a9;

/*overflow: scroll;*/
}
#footer {
width:750px;
height:50px;
text-align: center;
float: right;
}

.blueLinks:link
{
color:#5c75a9;
text-decoration:none;
font-weight: bold;
}
.blueLinks:visited
{
color: #5c75a9;
text-decoration:none;
}
.blueLinks:hover
{
text-decoration:underline;
color:#3CF;
}
.blueLinks:active
{
text-decoration:none;
color: #5c75a9;
}

/*
#5c75a9 background color
#8a9cc2 top border
#29447e border
#1a356e border bottom
#4f6aa3 hover background color
*/

.button_outside_border_blue{
width:145px;
border:solid #29447e 1px;
border-bottom:solid #1a356e 1px;
cursor:pointer;
}

.button_inside_border_blue{
padding:6px 0 6px 0;
background-color:#5c75a9;
border-top:solid #8a9cc2 1px;
text-align:center;
color:#ffffff;
}

div.button_inside_border_blue:active{
background-color:#4f6aa3;
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<?php include "include_head.php";?>
</head>
<body>
<div id="container">
<div id="header">
<?php include "include_header.php";?>
</div>
<div id="menu">
<?php include "include_menu.php";?>
</div>

<div id="main">

<h2>Welcome to my Homepage!</h2>
<p style="padding:10px">My drawings and paintings are all representational in character. They have followed a path of gradual evolution over the years. During this time I have experimented with a range of media and subject matter, often developing a series of works from a single landscape subject! The Website is organised on a geographical basis. Both the Derbyshire and the London pictures are concerned with colour and lighting effects. I favour the "panoramic", often with big skies! My composition models are from Hopper, Sickert and the Japanese legacy in 20th century European Art. I have a great admiration for the works of Turner, which inspire me with their drama and atmosphere. While digital and computer technology now play an important role in the recording and development of my ideas, I will always enjoy attempting the highest standards of draughtsmanship.</p>
<p>David Stowe</p>
</div>

<div id="footer"><?php include "include_footer.php";?></div>

</div>

</body>
</html>

abduraooft
06-15-2012, 11:21 AM
Try

#main {
padding:20px 10px 10px 10px;
/*float:left;
width:700px;
height:auto;*/
margin-left:160px;
border-radius: 4px;
-webkit-border-radius: 4px;
background-color:#5c75a9;

/*overflow: scroll;*/
}

chiba
06-16-2012, 08:42 AM
I tried doing what you suggested and the main div has moved away from the menu, but it's still bang up against the header. Also the background seems to have shrunk.

http://davidstowe.co.uk/pools.php

How can I fix them?

abduraooft
06-16-2012, 09:13 AM
Could you make a rough sketch of the desired output?

chiba
06-16-2012, 09:59 AM
I want there to be a space between the header/logo area and the main content area, currently they site up close.
Also the main area needs to vary in size depending upon how many photos are in it.
Any ideas?
http://davidstowe.co.uk/site.jpg

Candygirl
06-16-2012, 10:31 AM
Hello,


Hi guys,
I'm building the site below, but I'm having trouble getting the div to sit in the centre of the page. I added padding to the main div , but it still sits right next to the header div and doesn't look neat.

If you just want it to be as to the right as the header juste use a float:right instead of float:left


#main {
padding:20px 10px 10px 10px;
margin:10px;
float:right;
width:700px;
height:auto;
border-radius: 4px;
-webkit-border-radius: 4px;
background-color:#5c75a9;

}


Or you may add some margin to #main with the float:left:


#main {
padding:20px 10px 10px 10px;
margin-left:20px;
float:left;
width:700px;
height:auto;
border-radius: 4px;
-webkit-border-radius: 4px;
background-color:#5c75a9;

}

abduraooft
06-16-2012, 10:53 AM
Just remove the float:left; from #header

chiba
06-17-2012, 12:55 PM
Hi guys
Thanks for all your help

Any ideas why the footer is sitting on the main form?
http://davidstowe.co.uk/contactme.php


/*body
{
background:#E9E9E9;

}*/

#formWrap
{
width:auto;
/*background:#fff;*/
/*border:1px solid #F1F1F1;
-moz-border-radius:20px;
-moz-box-shadow:2px 2px 5px #999;
-webkit-border-radius:20px;
-webkit-box-shadow:2px 2px 5px #999;*/
/*padding:16px 10px 40px;*/
}
#formWrap #form
{
/* border-top: 1px solid #EEE;
width:720px;*/

}
#form .row
{
border-bottom: 1px dotted #EEE;
dispay:block;
line-height:38px;
overflow:auto;
padding:24px 0px;
width:100%;
}

#form .row .label
{
/*font-size:16px;*/
font-weight:bold;
/*font-family:Arial, Helvetica, sans-serif;*/
width:180px;
text-align:right;
float:left;
padding-right:10px;
margin-right:10px;
}

#form .row .input
{
float:left;
margin-right:10px;
/* width:auto;*/
width:285px;
}

#form .row .input2
{
float:left;
margin-right:10px;
/* width:auto;*/
width:466px;;

}

.detail
{
width:260px;
/*font-family:Arial, Helvetica, sans-serif;*/
font-size:20px;
padding:7px 8px;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
/*background:#E9E9E9;*/
border:1px solid #CCC;
}

.mess
{
width:450px;
height:280px;
max-width:450px;
overflow:auto;
/* font-family:Arial, Helvetica, sans-serif;*/
/* font-size:20px;*/
padding:7px 8px;
line-height:1em;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#E9E9E9;
border:1px solid #CCC;
}

.detail:focus
{
background-color:#FFF;
border: 1px solid #999;
outline:none;
}
.detail:mess
{
background-color:#FFF;
border: 1px solid #999;
outline:none;
}


#form .row .context
{
color:#999;
font-size:11px;
font-style:italic;
line-height:14px;
/* font-family:Arial, Helvetica, sans-serif;*/
width:200px;
float:left;
}

#form #submit
{
color:#000;
font-size:16px;
text-shadow:1px 1px 1px #999;
padding:10px;
}

span.error
{
color:#000;
display:block;
/* font-family:Arial, Helvetica, sans-serif;*/
font-size:12px;
background-image:url(../images/x.png);
background-repeat:no-repeat;
background-position:left 6px;
padding-left:25px;
}

#formWrap h2
{
/* font-family:Arial, Helvetica, sans-serif;*/
text-shadow:1px 1px 1px #CCC;
/* color:#255E67;*/
/* [disabled]margin-left:25px; */
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<?php include "include_head.php";?>

</head>
<body>
<div id="container">
<div id="header">
<?php include "include_header.php";?>
</div>
<div id="menu">
<?php include "include_menu.php";?>
</div>

<div id="main">

<div id="formWrap">
<h2>We appreciate your feedback</h2>
<div id="form">
<?php if($form_complete === FALSE): ?>
<form action="contactme.php" method="post" id="comments_form">
<div class="row">
<div class="label">Your Name</div> <!-- end .label-->
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>"/><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>

</div><!-- end .input-->
<div class="context">e.g. John Smith</div><!-- end .context-->
</div> <!-- end .row-->

<div class="row">
<div class="label">Your email address</div> <!-- end .label-->
<div class="input">
<input type="text" id="email" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>"/><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
</div><!-- end .input-->
<div class="context">We will not share your email.</div><!-- end .context-->
</div> <!-- end .row-->

<div class="row">
<div class="label">Your message</div> <!-- end .label-->
<div class="input2">
<textarea = "comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?> </textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
</div> <!-- end .row-->

<div class="submit">
<input type="submit" id="submit" name="submit" value="Send Message"/>

</div><!-- end .submit-->
</form>

<?php else: ?>
<script type="text/javascript">
setTimeout('ourRedirect()',1000)
function ourRedirect()
{
location.href='thanks.php';
}
</script>

<?php endif; ?>

</div> <!-- end #form-->
</div> <!-- end formWrap--->

<div class="clearFloat"></div>


</div>

<div id="footer"><?php include "include_footer.php";?></div>

</div>

</body>
</html>

abduraooft
06-18-2012, 05:42 AM
Remove the width and float from #footer

chiba
06-21-2012, 09:31 PM
Remove the width and float from #footer

Hi, and thanks for your help.

It's still not working. The footer seems to merge with the rest of the main div. Only on http://davidstowe.co.uk/contactme.php



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<?php include "include_head.php";?>

</head>
<body>

<div id="container">

<div id="header"><?php include "include_header.php";?></div>

<div id="menu"><?php include "include_menu.php";?></div>

<div id="main">

<div id="formWrap">
<h2>We appreciate your feedback</h2>
<div id="form">
<?php if($form_complete === FALSE): ?>
<form action="contactme.php" method="post" id="comments_form">
<div class="row">
<div class="label">Your Name</div> <!-- end .label-->
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="<?php echo isset($_POST['fullname'])? $_POST['fullname'] : ''; ?>"/><?php if(in_array('fullname', $validation)): ?><span class="error"><?php echo $error_messages['fullname']; ?></span><?php endif; ?>

</div><!-- end .input-->
<div class="context">e.g. John Smith</div><!-- end .context-->
</div> <!-- end .row-->

<div class="row">
<div class="label">Your email address</div> <!-- end .label-->
<div class="input">
<input type="text" id="email" class="detail" name="email" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>"/><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?></span><?php endif; ?>
</div><!-- end .input-->
<div class="context">We will not share your email.</div><!-- end .context-->
</div> <!-- end .row-->

<div class="row">
<div class="label">Your message</div> <!-- end .label-->
<div class="input2">
<textarea = "comment" name="comment" class="mess"><?php echo isset($_POST['comment'])? $_POST['comment'] : ''; ?> </textarea><?php if(in_array('comment', $validation)): ?><span class="error"><?php echo $error_messages['comment']; ?></span><?php endif; ?>
</div> <!-- end .row-->

<div class="submit">
<input type="submit" id="submit" name="submit" value="Send Message"/>

</div><!-- end .submit-->
</form>

<?php else: ?>
<script type="text/javascript">
setTimeout('ourRedirect()',1000)
function ourRedirect()
{
location.href='thanks.php';
}
</script>

<?php endif; ?>

</div> <!-- end #form-->
</div> <!-- end formWrap--->

<div class="clearFloat"></div>


</div><!-- end #main--->

<div id="footer"><?php include "include_footer.php";?></div>

</div><!-- end #container--->

</body>
</html>




#footer {
/*width:900px;*/
height:auto;
text-align: center;
/*float: left;*/
padding-top: 10px;
border-radius: 4px;
-webkit-border-radius: 4px;
background-color:#5c75a9;
/*margin-left:0px;*/
}

abduraooft
06-22-2012, 05:47 AM
The footer seems to merge with the rest of the main div.
Get a copy of firebug (http://getfirebug.com) for your firefox to inspect the elements on live. It appears, the footer is located inside the main. You might have some misplaced/missing closing tags. Have a look at http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdavidstowe.co.uk%2Fcontactme.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum