How to deal with DIV position and height


Tags: html,css,css3

Problem :

I've been coping with a position of DIVs in a page. I added an image for that

http://www.tiikoni.com/tis/view/?id=0e90b7f

Mainly, I have a container DIV named (A) and inside I want a DIV named (B) align completely to the right and I'll have many DIVs named (C and etc...) inside the parent container DIV but all of them on the left side.

What I want is the DIV on the right named (B) must stay like in the picture and with its height as the same as the container DIV (A) with CSS. It can be possible?

I tried this CSS to my DIV (B):

.panelB{
    float: right;
    display: block;
    width: 310px;
    height: 100%;
    overflow-y: auto;
}

I could solve this if I add another DIV that contains all the mini divs from the left but I cannot changes this design only with CSS. So, how can I make that the all standalone divs on the left respect a prudent space and leave the right panel (B) just there on the right.

I forgot to say that in the DIV (B) there are also mini divs that a user can add to main container div named (A). I mean, there's a DIV on B and user click on it to add it automatically on the left (it means the main container (A)) So when the DIV (B) starts to lose a div, it loses its height and all the divs added on the container starts to take the place of the DIV (B)



Solution :

If you want the height of the .panelB to expand/contract to the total height stack of the C block elements, you could absolute position .panelBto the right side of the screen, and set the its parent position to relative and add a padding-right: width of .panelB to it, like so (demo):

*, *:before, *:after {
    box-sizing: border-box;
}
.wrap{
    position: relative;
    width: 100%;
    background: green;
    padding-right: 310px;/*width of .panelB*/
}
.a{
    border: 1px solid cyan;
    display: inline-block;
    padding: 20px;
    margin: 5px;
}
.right-panel{
    position: absolute;
    top: 5px; bottom: 5px;
    right: 5px;
    width: 310px;
    background: yellow;
    min-height: 50px;/*just in case*/
}

    CSS Howto..

    Show/Hide H4's isn't working

    How to Center CSS Tabs

    How to make a website look like a Windows Office application? [closed]

    How to correct CSS formatting problem in Visual Studio

    How to center two blocks with some gap inbetween using CSS?

    How do you disable horizontal scrolling on a webpage?

    How to move items to left inside a div?

    How to change both fill and stroke in svg with css

    How to right align text but still keep it indented to left?

    How can i make infinite flowing background with only CSS?

    how to make Sections in one line?

    How to find all inputs which is not inside one div with css selector?

    How do i apply fadein and fadeout effect for this?

    how to add scrollbars to (a potentially infinite) canvas using fabric.js

    How to create CSS for an existing web application that now is used in a Kiosk with touch screen

    How to locate and use fonts in Qt for Embedded Linux?

    How to adjust font awesome down arrow via css

    how to use automatic css hyphens with word-break: break-all?

    How to stop html/css object from resizing

    How to style the arrow that opens submenus in jQuery mmenu?

    Fonts wont change and id height wont show

    How To Adjust CSS List On Hover Image

    jQuery & CSS: how to convert this drawer menu from left to right?

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    Menu hover effect - how to reproduce this effect?

    how to make colors generated via Javascript be stored permanently in CSS file with or without use of PHP

    How to change active link color in bootstrap css?

    How to change font color inside nav element?

    How to ensure three DIV are the same height regardless of content

    How to make a Xul button bigger using css as it get focus?