Clever Geek Handbook

Set div width to browser side

I start with two examples:

13 "macbook pro: macscreen 21" philips monitor philipscreen

Is it possible to set the full width for the parent element with position:fixed

, but for the children, set the width to the browser website, so in all sizes the text will be up to the browser website or at its maximum width.

CSS

div#wrapper{
    width: 100%;
    height: 100%;
    padding-top: 70px;
}

header#left-panel, header#right-panel{
    background: none repeat scroll 0 0 #000000;
    min-height: 40px;
    padding: 10px;
    opacity: 0.8;
}

header#left-panel{
    width: 185px;
    position: fixed;
}

header#right-panel{
    /*width: 100%;*/ /*here is the problem*/
    left: 755px;
    position: fixed;
}

HTML:

<body>
    <div id="wrapper">
        <header id="left-panel">
            <section id="contacts">
            </section>
        </header>
        <header id="right-panel">
            <section id="comments">
                <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                <div style="float:right">Lorem ipsum</div>
            </section>
        </header>
    </div>
</body>
+3


source to share


2 answers


Use right:0

in an element header#right-panel

.



You can play around with it at this jsFiddle .

+1


source 


header#right-panel{
    /*width: 100%;*/ 
    right: -1px;
    position: fixed;
}


must work

0


source






More articles:


All Articles