CODEWITHSUNDEEP
htmlcssstylessidebar
Frustrated Tech Newb
Frustrated Tech Newb

Reputation: 25

CSS - Sidebar not floating right of content

I would like the sidebar div to fit nicely beside the main div and I have done this multiple times before... I have no idea why it is not working this time and need a fresh pair of eyes to help me work out the problem.

Here is the full HTML: 

<head>
    <title>SiteName | Home</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

    <body>
        <div id="screen">
            <div id="header">
            <img style="float:left;" src="C:\Users\Jack\Downloads\Images\GFX\Website\awesomeface.jpg" width="75px" height="75px">
                <div id="title">
                    <h1>SiteName</h1>
                </div>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html">Gallery</a></li>
                        <li><a href="index.html">Contact Us</a></li>
                        <li><a href="index.html">Terms of Use</a></li>
                    </ul>
                </div>
            <div id="body">
                <h2>Welcome to the new website!</h2>
                <p class="bindent">For Chryses sought with costly gifts to gain His captive daughter from the victor's chain. Suppliant the venerable father stands; Apollo's awful ensigns grace his hands By these he begs; and lowly bending down, Extends the sceptre and the laurel crown He sued to all, but chief implored for grace The brother-kings, of Atreus' royal race</p>
            </div>
            <div id="sidebar">
                <h3>News</h3>
                <p class="sindent">Declare, O Muse! in what ill-fated hour Sprung the fierce strife, from what offended power Latona's son a dire contagion spread, And heap'd the camp with mountains of the dead; The king of men his reverent priest defied, And for the king's offence the people died.</p>
            </div>

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

Here is the full CSS:

#screen {
color: white;
font-family: verdana;
}

#header {
background: black;
border: 8px solid darkred;
padding: 1em;
}

#title {
text-indent: 5em;
}

#body {
padding: 1em;
border: 8px solid darkred;
background:#3d594b;
}

#sidebar {
padding: 1em;
border: 8px solid darkred;
background:#3d594b;
float: right;
}

#footer {
}

ul
{
position:relative;
float: left;
left: 50%;
list-style-type:none;
margin:0;
padding:0;
}

li
{
float:left;
position:relative;
right:50%;
}

a:link,a:visited
{
display:block;
font-weight:bold;
width:200px;
color:white;
background-color:darkred;
text-align:center;
padding:0.75em;
text-decoration:none;
text-transform:uppercase;
}

a:hover,a:active
{
background-color:lime;
}

.sindent {
text-indent:1em;
}

.bindent {
text-indent:2em;
}

As you can see I'm not clearing anything in the main div yet the sidebar div isn't floating right.

Thanks for your time, in advance.

EDIT: The width's I added were just to see if it would float and it still didn't.

EDIT 2: Added full CSS and HTML.

Upvotes: 1

Views: 19029

Answers (4)

ABrowBoyGenius
ABrowBoyGenius

Reputation: 73

I would use float: left; for the main and sidebar

This solves the problem. Then use clear: both; for the footer

Upvotes: 0

Ali Adravi
Ali Adravi

Reputation: 22723

You need to give the width to body as well as to sidebar otherwise they will always be 100% and will come in different rows

http://jsfiddle.net/fUMHF/

#body {
padding: 1em;
border: 8px solid darkred;
background:#3d594b;
    width:60%;
    float:left;

}

#sidebar {

padding: 1em;
border: 8px solid darkred;
background:#3d594b;
float: right;
    width:20%;
}

Upvotes: 1

Guy Schalnat
Guy Schalnat

Reputation: 1717

If you put the sidebar before main in the html, it should work just fine. The problem is that main, since it isn't floating, takes up space in the document and thus the sidebar starts below the main. There are other ways to do this as well if you want to keep the order in the html the same, but putting the sidebar first is probably simplest.

try http://jsfiddle.net/mZfK9/

<div id="sidebar">
    <h3>News</h3>
    <p class="sindent">Declare, O Muse! in what ill-fated hour Sprung the fierce strife, from what offended power Latona's son a dire contagion spread, And heap'd the camp with mountains of the dead; The king of men his reverent priest defied, And for the king's offence the people died.</p>
</div><div id="body">
    <h2>Welcome to the new website!</h2>
    <p class="bindent">For Chryses sought with costly gifts to gain His captive daughter from the victor's chain. Suppliant the venerable father stands; Apollo's awful ensigns grace his hands By these he begs; and lowly bending down, Extends the sceptre and the laurel crown He sued to all, but chief implored for grace The brother-kings, of Atreus' royal race</p>
    </div>

Upvotes: 2

Andy G
Andy G

Reputation: 19367

A div is a block-level element by default and will occupy the full width of the browser.

You could give the main-div display: inline-block or float it, float: left.

Upvotes: 1

Related Questions