html - Make Div fill full width but with sidebar - Not dependant on content -
ok, im not sure if possible here goes question.
i have 2 divs, <div id="article"> , <div id="sidebar"> , them in 2 column responsive layout. #sidebar remain fixed width.
currently have next setup:
<html> <div id="container"> <div id="article"> <h1>hello world</h1> </div> <div id="sidebar"> </div> </div> </html> -
#article { width: auto; float: left; padding: 0; margin: 0 300px 0 0; } #sidebar { float: right; width: 300px; margin: 0 0 0 -300px; padding: 0; } this works, #article div not fill space if there not plenty content in it. there way fill div content create expand total width? wanted horizontal ruler go across total page, going width of longest heading have.
primitive example: http://imgur.com/z7qwcnk
demo
css
html, body { height: 100%; width: 100%; margin:0; padding:0; } #container { height: 100%; /* occupy total width , height */ width: 100%; } #article { height: 100%; width: calc(100% - 300px); /* adjust width of sidebar */ float: left; background: green; } #sidebar { float: right; width: 300px; height: 100%; background: red; } html
<div id="container"> <div id="article"> <h1>hello world tes test test test test tes tete test test tes testve</h1> </div> <div id="sidebar"></div> </div> html css responsive-design
No comments:
Post a Comment