Jak umieścić sidebar, aby przylegał do prawej?


(Squall Ask) #1



Tytul


STOPKA

teksttekstteksttekstteksttekstteksttekstteksttekst
teksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
teksttekstteksttekstteksttekstteksttekstteksttekst
teksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstte
teksttekstteksttekstteksttekstteksttekstteksttekstteks

dffd


STOPKA

body {
background-color: green;

}

container {

width: 1024px;
height: 0 auto;
background-color: red;
margin: 0 auto;

}

menu {

float: left;
width: 100%;
background: #fff;
border-bottom: 2px solid #000;
overflow: hidden;
position: relative;
}

menu ul {

clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}

menu ul li {

display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}

menu ul li a {

display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
background-color: #ddd;
color: #000;
text-decoration: none;
line-height: 20px;
}

menu ul li a:hover {

background: #b00;
color: yellow;

}

topstopka {

background-color: pink;
text-align: center;

}

stopka {

background-color: orange;
text-align: center;

}

sidebar {

float: right;
clear: both;
background-color: black;

}

tresc {

background-color: yellow;
width: 800px;
clear: both;

}

Cześć,

 

Mam pytanie co zrobić, aby mój sidebar (czarny kolor) przylegał do prawej strony (aby w miejsce czerwonego koloru pojawił się sidebar).

 

Z góry dzięki za pomoc.


(Design Studio 3w) #2

body {
background-color: green;

}

#container {

width: 1024px;
height: 0 auto;
background-color: red;
margin: 0 auto;

}

#menu {
float: left;
width: 100%;
background: #fff;
border-bottom: 2px solid #000;
overflow: hidden;
position: relative;
}
#menu ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
#menu ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#menu ul li a {
display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
background-color: #ddd;
color: #000;
text-decoration: none;
line-height: 20px;
}
#menu ul li a:hover {
background: #b00;
color: yellow;

}

#topstopka {
background-color: pink;
text-align: center;

}

#stopka {

background-color: orange;
text-align: center;

}
#sidebar {
float: right;
width:200px;
background-color: black;

}
#tresc {

background-color: yellow;
width: 800px;
overflow:hidden;
float:left;

}
.clr{
clear:both;
}

Tytul

STOPKA

teksttekstteksttekstteksttekstteksttekstteksttekst
teksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
teksttekstteksttekstteksttekstteksttekstteksttekst
teksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekst
tekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstteksttekstte
teksttekstteksttekstteksttekstteksttekstteksttekstteks

dffd

STOPKA