For the following code, it renders the picture as follows
The effect I want is that the "Hello, user1" is aligned with the black box, and both of them are aligned to the right side of the grey box, how should I achieve this?
<html>
<head>
<style>
#header {
width: 100%;
height: 81px;
background: url(http://www5.picturepush.com/photo/a/12541848/img/Anonymous/header-bg.png) 0 0 repeat-x;
}
#header h1 {
display: block;
float: left;
margin: 30px 0 0 35px;
font-size: 18px;
color: #6a6a6a;
}
#header #logo {
display: block;
float: left;
}
#header #userlog {
width: 272px;
height: 31px;
background-color: #363636;
border-radius: 2px;
float: right;
margin: 27px 26px 0 0;
}#header #userlog a {
font-size: 13px;
float: left;
color: #b7b7b7;
margin-top: 6px;
}
#welcome_msg {
color: #b7b7b7;
float: right;
}
</style>
</head>
<body>
<div id="header">
<a id="logo" href="dashboard.php"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/archive/c/c1/20070624012131!Fuji_apple.jpg/120px-Fuji_apple.jpg" alt="" /></a>
<div class="welcome_msg" id="welcome_msg">hello, user1</div>
<h1> My Portal </h1>
<div id="userlog">
Contact Support
FAQ
logout
</div>
</div>
</body>
</html>
Put the both elements into a div and float that div right. The extra space in the right is because the element has a 26px margin.
<div id="whatever">
<div class="welcome_msg" id="welcome_msg">hello, user1</div>
<div id="userlog"> Contact Support
FAQ
logout
</div>
</div>
#whatever {
float:right;
}
#header #userlog {
width: 272px;
height: 31px;
background-color: #363636;
border-radius: 2px;
}
Demo: http://jsfiddle.net/kzhuL/
Like this?
I added a <div> container to hold #userlog and #welcome_msg.
CSS
#header #userlog {
margin: 0 26px 0 0;
}
#welcome_msg {
margin-right:26px;
}
HTML
<div id="container">
<div class="welcome_msg" id="welcome_msg">hello, user1</div>
<br />
<div id="userlog">
Contact Support
FAQ
logout
</div>
</div>
Related
I am making a ten-page website and I made the general layout but I can't figure out how to position images and text in the div box. Nothing works. In this particular page I want the image to be on the top right of the Div and the text to be on the left. I feel if I can get the general idea of how this works I will be able to do it for the other pages as well.
Below is my code:
<!DOCTYPE html>
<html>
<style>
h1{
color:white;
font-size: 50px;
font-family: ultra;
}
p{
color:white;
}
h2{
color:white;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
}
.sidenav a:hover {
color: #818181;
}
.main {
margin-left: 250px;
font-size: 28px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
body {
background-color:#252525;
background-attachment:fixed;
background-position: 50% 50%;
background-repeat:no-repeat;
margin: 0;
}
.header {
background-color: #252525;
padding: 10px;
margin-left: 250px;
text-align: center;
}
.rcorners1 {
margin: auto;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 90%;
height: 1000px;
</style>
<body>
<div class="sidenav">
Home
About
Why Us?
Meet The Team
Gear
Services
Products
Reviews
Location
Contact Us
</div>
<div class="header">
<h1>GEAR</h1>
</div>
<div align="center">
<div class="main">
<div class="rcorners1" style="background-color: #fffafa;" "text-align:right;">
<img src="Our Gadgets.jpg" class="expand" width="400" height="391" alt=""/>
<div>Content for New Div Tag Goes Here</div>
</div>
</div>
</body>
</html>
You can achieve what you are looking for, with float: right property. Try this code.
h1{
color:white;
font-size: 50px;
font-family: ultra;
}
p{
color:white;
}
h2{
color:white;
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
}
.sidenav a:hover {
color: #818181;
}
.main {
margin-left: 250px;
font-size: 28px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
body {
background-color:#252525;
background-attachment:fixed;
background-position: 50% 50%;
background-repeat:no-repeat;
margin: 0;
}
.header {
background-color: #252525;
padding: 10px;
margin-left: 250px;
text-align: center;
}
.rcorners1 {
margin: auto;
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 90%;
height: 1000px;
}
.main img {
float: right;
margin-left: 10px;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<body>
<div class="sidenav">
Home
About
Why Us?
Meet The Team
Gear
Services
Products
Reviews
Location
Contact Us
</div>
<div class="header">
<h1>GEAR</h1>
</div>
<div align="center">
<div class="main">
<div class="rcorners1" style="background-color: #fffafa;" "text-align:right;">
<img src="http://via.placeholder.com/300" class="expand" width="100" height="100" alt=""/>
<div class="text">Content for New Div Tag Goes Here</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Your code is wrongly finished, look at the below sample from your code, put another </div> tag.
<div align="center">
<div class="main">
<div class="rcorners1" style="background-color: #fffafa;" "text-align:right;">
<img src="Our Gadgets.jpg" class="expand" width="400" height="391" alt=""/>
<div>Content for New Div Tag Goes Here</div>
</div>
</div>
if you place image on the top right and text on the left, then simple use bootstrap for making grids like .col-md-6 .col-sm-12 .col-xs-12 in both image and text
OR
if you wrap the text around the image, then use float: right on the image and it will move to te right and text will wrap the image.
By the way, the code looks so messy, Don't put styles inside HTML page, use an external stylesheet for that.
I was hoping for some help with a problem involving some divs.
I am doing a Udemy course to recreate the BBC website and I've got to a point where I have some divs with content but there is a gap between them.
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial;}
#topbar {
width: 1050px;
margin: 0 auto;
height: 40px;}
#bbclogo {
margin-top: 8px;
float:left;
margin-right: 10px;
}
.topbar-section {
float:left;
border-left: 1px solid #CCCCCC;
height: 100%;
}
#signinimage {
margin: 10px 15px;
height: 20px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 14px;
position: relative;
top: 12px;
padding-right: 65px;
}
#signin-div {
float:left;
}
#wiggly-line {
height: 40px;
float: left;
}
#bello-image {
height: 26px;
margin: 7px 15px 7px 12px;
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 14px;
padding: 13px 13px 0 13px;
height: 27px;
}
#more-arrow {
height: 4px;
margin-left: 25px;
}
#searchbox {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 15px;
padding: 5px;
margin: 8px 0 8px 8px;
float: left;
}
#magnifying-glass {
margin-top: 8px;
height: 27px;
}
.clear {
clear: both;
}
#menu-bar-container {
background-color: #BB1919;
width: 100%;
height: 60px;
}
#menu-bar {
width: 1050px;
margin: 0 auto;
}
h1 {
margin: 0;
padding: 0;
color: white;
font-size: 40px;
font-weight: normal;
padding-top: 10px;
float: left;
}
#local-news {
float: right;
border: 1px solid #BB4545;
width: 175px;
margin: 15px 10px;
padding: 5px 5px 4px 5px;
}
#local-news a {
color: white;
text-decoration: none;
font-size: 20px;
position: relative;
top: -2px;
}
#local-news:hover {
text-decoration: underline;
}
#local-news img {
height: 20px;
padding-left: 10px;
}
#menu-bar-container-2 {
width: 100%;
background-color: #A91717;
display: block;
}
#menu-bar-2 {
width: 1050px;
margin: 0 auto;
height: 35px;
display: block;
}
#menu-bar-2 a {
color: white;
text-decoration: none;
padding: 0 16px;
border-right: 1px solid #BB4545;
font-size: 12px;
position: relative;
top: 9px;
float: left;
}
<div id="topbar">
<!--white top bar-->
<img id="bbclogo" src="Images\bbclogo.png"/>
<!--left border div with classes-->
<div id="signin-div" class="topbar-section"></div>
<!--Signin image-->
<div id="signin-div">
<img id="signinimage" src="Images\signinimage.png"/>
<span id="signin-text">Sign in</span>
</div>
<!--Bell div-->
<div id="bell-div">
<img id="wiggly-line" src="Images/pointed_line.png"/>
<img id="bello-image" src="Images/bell.png"/>
</div>
<!--Menubar links-->
<div class="topbar-section topbar-menu">News</div>
<div class="topbar-section topbar-menu">Sport</div>
<div class="topbar-section topbar-menu">Weather</div>
<div class="topbar-section topbar-menu">iPlayer</div>
<div class="topbar-section topbar-menu">TV</div>
<div class="topbar-section topbar-menu">Radio</div>
<div class="topbar-section topbar-menu">More
<img id="more-arrow" src="Images/arrow.png"/>
</div>
<!--Search bar-->
<div class="topbar-section">
<input id="searchbox" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="Images/glass.png"/>
</div>
</div>
<!--To clear previous floats-->
<div class="clear"></div>
<!--Menu bar-->
<div id="menu-bar-container">
<div id="menu-bar">
<h1>NEWS</h1>
<div id="local-news">
Find local news
<img src="Images/pointer.png">
</div>
</div>
</div>
<!--Menu bar 2-->
<div id="menu-bar-container-2">
<div id="menu-bar-2">
Home
UK
World
Business
Politics
Tech
Science
Health
Education
Entertainent & Arts
Video & Audio
More
</div>
</div>
I've tried playing around with various things (changing display, floating, trying to clear previous divs...) but I can't seem to figure out the problem. I was hoping for some advice about what I am doing wrong.
I read somewhere that whitespace between divs can sometimes be an issue. Could this be the problem?
(strangely, when I created the code snippet above, the gap was not showing in the results window but when I try it in Chrome, IE or Firefox, the problem occurs)
Many thanks in advance
thanks for the advice on my problem.
As mentioned in my last comment, it was the height of the div which was creating the gap (it wasn't tall enough). I think this was due to another element's padding pushing the lower div down, so when I increased the height it brought everything into alignment.
I'm still learning a lot about web development and I am grateful for the responses. I'm sure I'll be learning a lot more along the way. Many thanks!
I have been trying to add three icons for like 6 hours and nothing works can someone please help :(
Want the icon to show up above "Performance", "Technology", and "Design".
In addition I wanted to add quote icons to the <p> tags inside the three div's.
Also wanted to change the color of the icons to match the hr tag with the same hue of red.
Here is my HTML
<html>
<header>
<title>NavBar</title>
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</header>
<body>
<div id="menu wrapper" class="red">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
<li class="login"><a class="login" href="#">Log In</a></li>
</ul>
</div>
<div class="header">
<img class="head-image" src="banner2.jpg">
</div>
<div class="hr">
<hr />
</div>
<div class="content">
<div class="container">
<div class="icon1">
<i class="fa fa-rocket fa-5x"></i>
<h2>Performance</h2>
<hr class="ptd" />
<p>Best in class when it comes to raw power!</p>
</div>
<div class="icon2">
<i class="fa fa-power-off fa-5x"></i>
<h2>Technology</h2>
<hr class="ptd" />
<p>Oringinal Innovations pushing the boundaries of modern technology</p>
</div>
<div class="icon3">
<i class="fa fa-laptop fa-5x"></i></a>
<h2>Design</h2>
<hr class="ptd" />
<p>Designed with you in mind</p>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
Here is my CSS
body {
background-image: url(black-Linen.png);
}
/* NavBar */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #800000;
font-size: 13px;
height: 40px;
border-bottom: 2px solid #5A0000;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #FFF;
}
#menu li a:hover {
background-color: #CC0000;
border-bottom: 2px solid #DDD;
color: #000;
}
#menu_wrapper ul {
margin-left: 12px;
}
#menu_wrapper {
padding: 0 16px 0 0;
background-color: #666666;
}
#menu_wrapper div {
float: left;
height: 44px;
width: 12px;
background-color: #666666;
}
.header {
height: 720px;
width: 1600px;
margin: 0 auto 0 auto;
padding: 10px 10px 20px 10px;
overflow: hidden;
}
.head-image {
height: 720px;
width: 1600px;
box-shadow: 5px 5px 3px #000;
}
div.hr {
height: 32px;
background: url(fire.png) no-repeat scroll center;
}
div.hr hr {
display: none;
}
.content {
width:1600px;
height: 250px;
margin: 25px auto 15px auto;
padding: 10px;
}
/*Performance*/
.icon1 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
.container i {
display: block;
margin: 10px auto 0 auto;
width: 32px;
color: #800000;
border-radius:50%;
}
/*Technology*/
.icon2 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: 42px;
margin-left: 42px;
}
/*Design*/
.icon3 {
border: 2px solid #FFF;
background-image: url(tactile_noise.png);
height: 240px;
width: 500px;
float: left;
margin-right: auto;
margin-left: auto;
}
h2 {
text-align: center;
font-weight: bold;
font-family: roboto, sans-serif;
margin-top: 2px;
}
h2 a {
text-decoration: none;
color: #FFF;
}
h2 a:hover, a:active {
color: #9f1111;
}
.ptd {
width: 40%;
}
p {
text-align: center;
font-style: italic;
font-family: roboto, sans-serif;
color: #FFF;
}
I think it's actually working fine, I can see icons in my JS Fiddle.
Could the problem be your link to your CSS file? Should there be a space within the href?
<link type="text/css" rel="Stylesheet" href="NavBar Example.css">
http://jsfiddle.net/Delorian/1x6u553h/
Start by double checking your markup. You have two IDs "menu" + "wrapper" and one selector "#menu_wrapper". I think you should keep IDs just for actions and add classes to add style.
Your markup:
<div id="menu wrapper" class="red">
...
</div>
Correct markup:
<div id="menu" class="wrapper red">
...
</div>
You are missing the protocol http:// on your link to the bootstrap CDN.
Try to add it to the link and see if it works:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too
Hello i am trying to get my columns in css to go down the page. Im new to css but know some css for messing around with things.
My columns are sat next to each other like so
collum1 collum2
I am trying to make them go down the page like so
collum1
collum2
But seems not wanting to move...
Here is my page source for the left side bar.
<div class="col1">
<div class="box" id="news">
<h1 id="news_handle">Home</h1>
<ul>
<li>Login</li>
<li>Register</li>
</ul>
<div class="bar">
<span>
<span></span></span></div>
</div>
<div class="box" id="events"></div>
</div>
<div class="co22">
<div class="box" id="news">
<h1 id="news_handle">22</h1>
<ul>
<li>1212</li>
<li>1212</li>
</ul>
<div class="bar">
<span>
<span></span></span></div>
</div>
<div class="box" id="events"></div>
</div>
Then here is my css style / file
body
{
background: #122530 url('./images/background.jpg') repeat-y;
text-align: center;
font: 12px Tahoma, Arial, Hevetica, Sans-serif;
}
a,a:visited
{
color: #1e3f51;
}
a:hover
{
text-decoration: none;
}
a img,a:visited img
{
border: 0;
}
/**
* General Structure
*/
div#container
{
width: 873px;
margin: 0 auto 0 auto;
text-align: left;
}
/**
* Banner/Nav
*/
div#banner
{
height: 255px;
background: url('./images/banner.jpg') no-repeat;
margin: 0 0 10px 0;
clear: both;
}
div#nav
{
background: url('./images/nav_bg.jpg') no-repeat;
height: 35px;
margin: 1px 0px 0px 2px;
width: 100%;
overflow: hidden;
float: left;
}
div#nav a
{
color: #ffffff;
font: bold 10px Tahoma, Arial, Hevetica, Sans-serif;
text-decoration: none;
height: 12px;
display: block;
float: left;
padding: 11px 7px 11px 7px;
text-transform: uppercase;
margin: 1px 0 0 0;
}
div#nav a:hover
{
background: url('./images/nav_hover.jpg') repeat-x;
}
/**
* Columns
*/
div.col1,div.col2
{
float: left;
}
div.col1
{
width: 190px;
}
div.col2
{
width: 479px;
margin: 0 7px 0 7px;
}
/**
* Columns
*/
div.co22
{
float: left;
}
div.co22
{
width: 190px;
}
div.co22
{
width: 479px;
margin:25px 50px 75px;
}
/**
* Box Elements
*/
div.box
{
margin: 0 0 10px 0;
}
div.box h1
{
height: 29px;
color: #ffffff;
font: 15px 'Trebuchet MS', Tahoma, Arial, Helvetica, Sans-serif;
padding: 6px 0 0 10px;
margin: 0;
border-bottom: 1px solid #112735;
cursor: move;
}
div.col2 div.box h1
{
cursor: auto;
}
div.col1 div.box h1
{
background: url('./images/col1_head.jpg') no-repeat;
}
div.col2 div.box h1
{
background: url('./images/col2_head.jpg') no-repeat;
}
div.box div.bar
{
height: 23px;
clear: both;
background: url('./images/box_foot.jpg') repeat-x;
color: #d1e3ee;
font: 11px Tahoma;
}
div.box div.bar span
{
height: 23px;
display: block;
background: url('./images/box_foot_left.jpg') no-repeat;
float: left;
padding: 4px;
}
div.box div.bar span span
{
height: 23px;
width: 2px;
background: url('./images/box_foot_right.jpg') top right no-repeat;
float: right;
display: block;
margin: -4px;
}
div.box div.bar a
{
display: block;
color: #d1e3ee;
text-decoration: none;
}
div.box div.bar a.right
{
text-align: right;
}
div.content
{
margin: 0 2px 0 2px;
background: #c1dae8 url('./images/body_bg.jpg') repeat-x;
border: 1px solid #ffffff;
padding: 10px 0 10px 0;
}
div.content p
{
margin: 0;
padding: 5px;
}
/**
* Lists
*/
ul
{
margin: 0;
padding: 0;
list-style: none;
}
ul li
{
background: url('./images/list_item.jpg') repeat-x;
border: 1px solid #112735;
border-top: 0px;
height: 14px;
padding: 4px;
}
ul li a
{
display: block;
text-decoration: none;
height: 14px;
}
ul.sponsors li
{
background: url('./images/list_sponsor.jpg') repeat-x;
height: 48px;
padding: 0;
}
ul.sponsors li a
{
height: 48px;
}
/**
* Footer
*/
div#footer
{
background: url('./images/footer.jpg') no-repeat;
height: 36px;
clear: both;
}
div#footer a
{
display: block;
height: 36px;
}
div#footer a span
{
display: none;
}
I have been awake 12 hours looking though google and trying to make them down under each other with no luck.
Okay Have looked at your code using firebug.
Why are you inserting more than one
<div class="col1">
...
</div>
You should just place all boxes in the same col1. You do not need two of these.
Basically, do not use two versions of col1 but place all boxes in the same col1, one below each other.
<div class="col1">
<div class="box" id="news" style="position: relative; "></div>
<div class="box" id="events" style="position: relative; "/> </div>
<div class="box" id="news" style="position: relative; "></div>
<div class="box" id="events" style="position: relative; "/> </div>
</div>
If you need to access each box directly then separate them by using different ids, id="news1", id="news2" ...
---EDIT---
Well I have tried it and look:
HTML for one of your col1 (same for both sides).
<div class="col1">
<div class="box" id="news">
<h1 id="news_handle">Home</h1>
<ul>
</ul>
<div class="bar">
<span>
<span></span></span></div>
</div>
<div style="height:20px;"> </div>
<div class="box" id="sponsors">
<h1 id="news_handle">Home</h1>
<ul>
<li>Login</li>
<li>Register</li>
</ul>
<div class="bar"> <span> <span></span></span></div>
</div>
<div class="box" id="affiliates"></div>
<div class="box" id="items"></div>
</div>
I have not changed your CSS, that is what is live
i would suggest removing the
float:left;
from columns... and add:
display:block;
Here you go : http://jsfiddle.net/d47Vs/
I would suggest to put both columns into a div:
<div class="sidebar">
<div id="col1"></div>
<div id="col2"></div>
</div>
Now float: left; for both center box and left sidebar. In order to have col1 and col2 underneath each other use as Philip said display: block;
Edit:
As you already have the first column on the left side if you want the second column on the right side of the box to the left side under the first column then just add the it like following:
<div id="col1">
First column content
<div id="col1>
Second column content
</div>
</div>
<div id="col2"></div>
Link to the html file with css