How to anchor a dynamic div to the screen?


Tags: css,html,width,screen

Problem :

I'm looking for a way to devide my screen perfectly into two divs. One small fixed sized on the left and one with dynamic width on the right.

I didn't figured out how to do this yet. Because the width in percentage is not proportional.

For example: http://jsfiddle.net/acmnU/2/

If you resize the result field or the overall width you see that the green div will not resize in proportion with the screen. If the field gets to small the green div slips under the red one.

what I need is some kind of anchor. So that the green div fill the entire screen without getting to big.

HTML:

<body>
    <div id="content">
        <div class="left">left</div>

        <div class="right">right</div>
    </div>
</body>

CSS:

body {
height: 300px;
}

#content {
    height: 100%;
}

.left {

    float: left;
    margin-left: 10px;
    background-color: red;
    height: 100%;
    width: 200px;
}
.right {
    float: left;
    margin-left: 10px;
    background-color: green;
    height: 100%;
    width: 80%;
}


Solution :

I hope I have interpreted your question correctly. You can try this fiddle

body {
    height: 300px;
}

#content {
    height: 100%;
}

.left {
    float: left;
    margin-left: 10px;
    background-color: red;
    height: 100%;
    width: 200px;
}
.right {
    margin-left: 200px;
    background-color: green;
    height: 100%;
}

I have set the margin-left of the .right to equal that of the width of .left. But don't float the right panel and it will fill the remaining space.

Result


    CSS Howto..

    How to center this rotating image (CSS animation)

    How can I customize the CSS generated by LESS to include Font Awesome?

    How do I center this menu?

    How to prevent the button from submission the form after sending it?

    how to use removeclass() function in Jquery to disable the CSS

    How can I use dropdowns in a masonry layout?

    How do I find out which style is overriding another style?

    How to reuse css styles from Telerik RadControls for ASP.NET Ajax

    How to style responsive table to make table like list?

    how to add scroller for one div, 2 divs always visible

    How to not change color of link on hover

    How to create a table inner bevel in HTML/CSS?

    In CSS how do I affect links of only 1 class

    How do I use Controller specific stylesheets in Rails 3.2.1?

    How do i make the header/footer extend width-wise to fit the screen, and the main content extend height-wise to fit the screen?

    How to make an equal distance between elements footer?

    how to avoid bullets showing in main menu

    How to control a

    How to keep the entire website aligned to the top when zooming-out using CSS (Firefox)?

    How to make a drop-right menu?

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How do I reference host element in CSS of an Angular2 component?

    How to fix width of tooltip at IE8

    How to set max-width for DIV contents but not the DIV itself?

    css - how to setup image editing page

    How to make the gradient border stay at the screen

    How to make div height 100% inside relative div?

    How to vertically align both image and text in a DIV using CSS?

    How to change buttons to pictures in jquery dialog

    How to fit height of aside to body height