...

View Full Version : Floating <div>



Aurora.Light
04-10-2011, 10:51 PM
Hey guys, I've always had some trouble with floating <div>. I put the entire script in so you could see the entire page. Look for the bolded underlines in sccript.



<html>
<head>
<title>vGame | Video Game Reviews</title>
<link rel="stylesheet" type="text/css" href="global.css"/>
</head>
<body>
<div id="beta2">
<a href="#">Beta 2.0 Release Date: 9/4/11</a>
</div>
<div id="header">
<div id="logo">
<h1>vCurrent</h1>
</div>
<div id="user_panel">
<div id="search">
<input type="text" name="search" maxlength="40"/>
</div>
<div id="login">
<input type="text" name="username" maxlength="24"/>
<input type="text" name="password" maxlength="24"/>
</div>
</div>
</div>

<div id="content">
<div id="tabs">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</div>
<div id="row2">
<div id="flash">
<textarea rows="20" cols="60">flash content here</textarea>
</div>
<div id="most_followed"> <!-- float next to id="flash" -->
<ol>
<li>SCII</li>
<li>Black Ops</li>
<li>Metroid</li>
<li>Sims 4</li>
<li>Boxhead Bounty Hunter</li>
</ol>
</div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Licenses</a></li>
<li><a href="#">User Agreement</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>




/* margin, padding, border, background, font (family, type, align), float */

/* ---------------------------

Global

--------------------------- */

body, h1, p, input {
margin: 0px;
padding: 0px;

}

/* ---------------------------

Header

--------------------------- */

/* Beta 2.0 */
#beta2 {
padding: 2px 30px 2px 0px;
border: solid;
border-width: 0px 0px 1px 0px;
background-color: grey;
text-align: right;
display: block;
}

#beta2 a {
text-decoration: none;
color: #000000;
}

#beta2 a:hover {
text-decoration: underline;
}

/* Header */
#header {
margin: 0 auto;
border: solid;
border-width: 0px 0px 1px 0px;
background-color: yellow;
font-family: Arial, sans-serif;
overflow: hidden;
}

#logo {
padding: 30px 0px 30px 60px;
font-size: 24px;
float: left;
}

#user_panel {
float: left;
position: relative;
top: 60px;
left: 350px;
}

#search {
float: left;
border-right: solid;
padding-right: 10px;
}

#search input {
width: 300px;
}

#login {
padding-left: 10px;
float: left;
}

#login input {
width: 100px;
}

/* ---------------------------

Content

--------------------------- */

#content {
margin: 0px 200px 0px 200px;
border: solid;
border-width: 0px 1px 0px 1px;
background-color: green;
}

#tabs ul {
list-style: none;
margin: 0px;
padding: 0px 0px 30px 0px;
text-align: center;
}

#tabs li {
display: inline;
padding: 0em 4.2em 1em 4.2em;
border: solid;
border-width: 0px 1px 1px 1px;
background-color: grey;
font-family: Arial, Helvetica, sans-serif;
}

#tabs li a {
color: #FFFFFF;
text-decoration: none;

}

#tabs li a:hover {
text-decoration: underline;
}

#flash { /* need float */
}

#most_followed { /* need to be to the "right" of flash */
font-family: Verdana, sans-serif;
}


/* ---------------------------

Footer

--------------------------- */

#footer {
border: solid;
border-width: 1px 0px 0px 0px;
font-family: Arial, sans-serif;
display: block;
}

#footer ul {
list-style: none;
margin: 0px;
padding: 4px 0px 4px 0px;
background-color: grey;
text-align: center;
}

#footer li {
display: inline;
}

Aurora.Light
04-11-2011, 12:23 AM
nvm fixed it meself



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum