CODEWITHSUNDEEP
htmlcssalignment
TheTrashinger
TheTrashinger

Reputation: 47

Alignment a Sidebar

I´m trying to separate the section[main content] with the aside[sidebar]. I want that's the blue box on the right side of the Green. I tryed it with the overflow: hidden; and with float = right [in aside] and float = left [in section]. However the footer gets shifted.

The code: http://jsfiddle.net/q48cospu/1/

Can anyone find the problem in the code?

Upvotes: 1

Views: 33

Answers (3)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

Here, I think this is what you are wanting

http://jsfiddle.net/DIRTY_SMITH/q48cospu/11/

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("http://fonts.googleapis.com/css?family=Open+Sans");

header, nav, aside, section, footer
{

}

body
{
    font-family: 'Open Sans', sans-serif;
  background: #f0f0f0;
  font-weight: 300;

}

header
{
    background-color:yellow;
}

nav
{
    background-color:orange;
}

section
{
    background-color:yellowgreen;
    width: 60%;
    margin-left: 10%;

}

footer
{
    background-color:deepskyblue;
}

article
{

}

aside
{
    background-color:blue;
    width: 20%;
}

.box-header
{
border: 1px solid none;
border-radius: 10px 10px 0px 0px ;
-moz-border-radius: 10px 10px 0px 0px ;
-webkit-border-radius: 10px 10px 0px 0px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
}

.box-nav
{
border: 1px solid none;
border-radius: 0px 0px 10px 10px ;
-moz-border-radius: 0px 0px 10px 10px ;
-webkit-border-radius: 0px 0px 10px 10px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
}

.box-section
{
border: 1px solid none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
float: left;
}

.box-sidebar
{
border: 1px solid none;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
float: left;
}

.box-footer
{
border: 1px solid none;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 5px;
clear:both;
}

Upvotes: 0

iCediCe
iCediCe

Reputation: 1722

Try floating aside right and section left and then

clear:both;

on the footer.

like this: fiddle

Upvotes: 1

Eugene Kapustin
Eugene Kapustin

Reputation: 166

I think you need something like this: http://jsfiddle.net/q48cospu/3/

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Roboto+Condensed");
@import url("http://fonts.googleapis.com/css?family=Open+Sans");

header, nav, aside, section, footer
{
    display: block;
    float: left;
    position: relative;

}

body
{
    font-family: 'Open Sans', sans-serif;
  background: #f0f0f0;
  font-weight: 300;
    margin: 0;
    padding: 0;
}

header
{
    background-color:yellow;
    width: 100%;
}

nav
{
    background-color:orange;
    width: 100%;
}

section
{
    background-color:yellowgreen;
    width: 70%;
    min-height: 15em;
}

footer
{
    background-color:deepskyblue;
    width: 100%;
}

article
{

}

aside
{
    background-color:blue;
    width: 26%;
    color: white;
    min-height: 15em;
}

.box-header
{
border: 1px solid none;
border-radius: 10px 10px 0px 0px ;
-moz-border-radius: 10px 10px 0px 0px ;
-webkit-border-radius: 10px 10px 0px 0px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 1%;
}

.box-nav
{
border: 1px solid none;
border-radius: 0px 0px 10px 10px ;
-moz-border-radius: 0px 0px 10px 10px ;
-webkit-border-radius: 0px 0px 10px 10px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 1%;
}

.box-section
{
border: 1px solid none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 1%;
}

.box-sidebar
{
border: 1px solid none;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding:1%;
}

.box-footer
{
border: 1px solid none;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
box-shadow: 1px 2px 4px rgba(0,0,0,.4);
padding: 1%;
}

Upvotes: 0

Related Questions