Css box positions

dealwi8me

08-04-2011, 08:32 AM

Hello,

I'm just getting started with css and I have some issues to solve! Below, i give the .html and .css file.
My problems are the following:
1. I want the div upFooter3 to be in the same line as upFooter1, upFooter2,upFooter4 and i can't understand what am i doing wrong.
2. I can't set div search to be placed above the div header logo on the right side.

Any suggestions?

Thank you in advance:)

<!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>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="default" id="wrapper">
<div class="upMenu" id="upMenu">
upMenu
</div>
<div class="search" id="search">
search
</div>
<div id="headerLogo">
<p>header logo </p>
<p> </p>

<div class="mainMenu" id="mainMenu">
main menu
</div>
</div>
<div class="breadcrumbs" id="breadcrumbs">
breadcrumbs
</div>
<div class="mainLeft" id="mainLeft">
main Left
</div>
<div class="mainRight" id="mainRight">
main Right
</div>
<div class="mainCenter" id="mainCenter">
<p>main Center </p>
<p> </p>
<p> </p>
</div>
<div class="upFooter1" id="upFooter1">
upfooter 1
</div>
<div class="upFooter4" id="upFooter4">
upfooter 4
</div>
<div class="upFooter2" id="upFooter2">
upfooter 2
</div>
<div class="upFooter3" id="upfooter3">
upfooter 3
</div>
<div class="footer" id="footer">
footer
</div>
</div>
</body>
</html>

default.css
.default {
width: 90%;
margin-left: 5%;
}
.upMenu {
text-align: right;
width: 100%;
}
.breadcrumbs {
float: left;
width: 100%;
}
.search {
width: 20%;
float: right;
}
.mainMenu {
width: 100%;
text-align: center;
}
.mainLeft {
float: left;
width: 12%;
}
.mainCenter {
width: 66%;
margin-left: 12%;
}
.mainRight {
float: right;
width: 22%;
}
.upFooter1 {
float: left;
width: 25%;
}
.upFooter2 {
width: 25%;
margin-left: 25%;
}
.upFooter3 {
width: 25%;
margin-left: 50%;
float: left;
}
.upFooter4 {
float: right;
width: 25%;
}

.footer {
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
color: #903;
background-color: #CCC;
text-align: center;
padding-top: 1%;
padding-bottom: 1%;
width: 100%;
}

vikram1vicky

08-04-2011, 08:41 AM

Use following code:

<!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>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.default {
width: 90%;
margin-left: 5%;
}
.upMenu {
text-align: right;
width: 100%;
}
.breadcrumbs {
float: left;
width: 100%;
}
.search {
width: 20%;
float: right;
}
.mainMenu {
width: 100%;
text-align: center;
}
.mainLeft {
float: left;
width: 12%;
}
.mainCenter {
width: 66%;
margin-left: 12%;
}
.mainRight {
float: right;
width: 22%;
}
#upFooter {
overflow:auto;
height:1%;
}
#upFooter div{
float:left;
width:25%
}
.upFooter1 {

}
.upFooter2 {

}
.upFooter3 {

}
.upFooter4 {

}

.footer {
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
color: #903;
background-color: #CCC;
text-align: center;
padding-top: 1%;
padding-bottom: 1%;
width: 100%;
}
</style>
</head>

<body>
<div class="default" id="wrapper">
<div class="upMenu" id="upMenu">
upMenu
</div>
<div class="search" id="search">
search
</div>
<div id="headerLogo">
<p>header logo </p>
<p> </p>

<div class="mainMenu" id="mainMenu">
main menu
</div>
</div>
<div class="breadcrumbs" id="breadcrumbs">
breadcrumbs
</div>
<div class="mainLeft" id="mainLeft">
main Left
</div>
<div class="mainRight" id="mainRight">
main Right
</div>
<div class="mainCenter" id="mainCenter">
<p>main Center </p>
<p> </p>
<p> </p>
</div>
<div id="upFooter">
<div class="upFooter1" id="upFooter1">
upfooter 1
</div>
<div class="upFooter4" id="upFooter4">
upfooter 4
</div>
<div class="upFooter3" id="upfooter3">
upfooter 3
</div>
<div class="upFooter2" id="upFooter2">
upfooter 2
</div>

</div>
<div class="footer" id="footer">
footer
</div>
</div>
</body>
</html>

dealwi8me

08-04-2011, 09:15 AM

Thank you for your quick answer!

I copy your code but i don't get all the upfooters at the same line.

vikram1vicky

08-04-2011, 09:19 AM

Thank you for your quick answer!

I copy your code but i don't get all the upfooters at the same line.

Make changes in CSS code... no need to define seperate style for each DIV...

dealwi8me

08-04-2011, 09:31 AM

my mistake... your code works just fine!

thanks a lot for the help:)