Выравнивание боковой панели

Я пытаюсь отделить section [основное содержание] с помощью aside [боковая панель]. Я хочу, чтобы это синяя коробка с правой стороны Зеленая. Я попробовал его с помощью overflow: hidden; и с float = right [in aside] и float = left [in section]. Однако footer переключается.Выравнивание боковой панели

Код: http://jsfiddle.net/q48cospu/1/

Можно ли найти проблему в коде?

источник

2015-07-31 TheTrashinger

Здесь, я думаю, что это то, что вы хотели

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; 
}

источник

2015-07-31 23:33:45

Приятное спасибо. Но возможно ли, что синий и зеленый ящик находится в центре стороны? – TheTrashinger

Вы хотите сосредоточить их на странице по горизонтали? –

@ TheTrashinger вот так? http://jsfiddle.net/DIRTY_SMITH/q48cospu/11/ –

Постарайся плавающая в сторону правой и левой секции, а затем

clear:both;

на сноске.

так: fiddle

источник

2015-07-31 23:26:56 iCediCe

Да, это работает, но теперь это выглядит так : [link] (http://jsfiddle.net/q48cospu/6/) Но я хочу, чтобы синий и зеленый ящик бок о бок, и он должен быть в центре – TheTrashinger

вот так: https: // jsfiddle. net/q48cospu/10 /? – iCediCe

Я думаю, что нужно что-то вроде этого: 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%; 
}

источник

2015-07-31 23:27:53

Выравнивание боковой панели

ответ

Смежные вопросы