So here's what I want to do:
Let there be a fixed size column. The height of the column should take up the size of the parent.
Inside the column I have two divs, stacked vertically. The width of both of them takes up the column width. The height of the first div is fixed size. The second however is variable, taking up whatever remains from the parent. Moreover its content is variable. If its content is to large a vertical scroll bar should appear.
How can I do this with HTML and CSS?
Here's a quick JSFiddle POC.
My problem is that if I set the second divs height as auto it will stretch outside its parent. If I set it 100% it will be again larger than its parent. It's important that the scroll bar to appear only for the second div, not the main div itself.
Thanks,
Here is what I would do:
http://jsfiddle.net/Tfzhm/1/
Add position:relative to the container div, and make the scrollable div position:absolute. The top should be set to the same amout of pixel as the height of the first stacked div. And finally, set bottom:0px so it gets to the bottom line of the containing div.
Related
i'm trying to figure out how i could align the childs of a verticalPanel as i want.
I have a verticalPanel with 100% height which is added to center of a splitLayoutPanel.
When adding the first child in the verticalPanel it automaticaly aligns to the top.
After setting the hight of the child widget to for example 30PX and adding another child, the second one aligns to the top of the half hight of the verticalPanel.
I would like to be the second child (scrollPanel) aligned right under the first one considering the spacing and the scrollPanel should use 100% of the rest from the verticalPanel heigt.
Hope you can help me.
Try setting the height of the second cell to 100%, e.g.:
myVerticalPanel.setCellHeight(myScrollPanel, "100%");
Alternatively, you could replace the VerticalPanel by a DockPanel (or DockLayoutPanel) and add the first child north and the second child in the center.
What I think happening is this,
A vertical panel is implemented as a table when rendered, so when you set height of vertical panel to 100% it sets the height of the table to 100%. When you add an item to it, the 1st item is added to a which effectively takes up the 100% height, and inside that the added child is set to height 30px. Now when you add another child to the panel another is created. Now the vertical panel ie the table has two rows so it distributes the height equally ie 50% to reach row, hence you observe the behavior of getting added to top of half height.
A simple solution to this would be to use FlowPanel(with 10%% width and height) and have your child added to it take width as 100% and height for 1st child as 30px and 2nd child with width and height both 100%. Hope that helps you.
I have a fluid layout consisting of a header and a content area. The header is meant to occupy 10% of the window's height and the content area is expected to occupy the remaining 90%. Text in the entire screen should scale proportionally to the window's height. Also text in the header should be centered vertically. I am able to meet all these requirements except the last one. Anyone know how to do this?
Here's what I have so far: http://jsfiddle.net/nareshbhatia/h2s4h/
I am using Em units to do relative sizing of the text. I use JavaScript to change the font-size of the body element whenever the window is resized. This approach scales the fonts beautifully for the entire window. Finally, I tried to center the header text vertically by setting the line-height of the header to be the same as its height (i.e. 10%). This usually centers the text vertically (when the height is defined in pixels), but in this case the text does not center vertically. Any ideas on how to fix this?
Edit The jsFiddle is updated to show the suggested answer.
The line-height approach centers the text when you only have one line. You are using percentages, so I think this question might help in that respect.
What you could do instead is use some more jQuery or JS to, on load:
Measure the outer height of the paragraph (or whatever element you are using) in the .content
Calculate the bottom offset of this paragraph in relation with the .content (how much space you have remaining from the bottom border of the paragraph to the bottom border of the .content div)
Divide the remainder in two, and add that number as a top margin or top position for the paragraph.
This will let you have longer text without messing with the line-height.
If you want a pure css solution, check these alternative ways of centering vertically.
I'm trying to place three divs side by side.
The first div has a fixed width and needs to be against the left side of the screen (ie: float:left;).
The next div also has a fixed width and needs to be against the right side of the screen (ie: float:right;).
And the last div needs to fill the space in between them and adjust based on the width of the browser window.
When a certain minimum width is reached for this last div in the middle I need it to stop getting smaller and have scroll bars appear in the browser.
Is this possible to achieve? If so, how?
try this link. basically, there are 3 divs, 2 of them which placed on the side are fixed width absolute position div while the center is a normal div with margin.
I've tried various combinations of html elements and CSS to get this to work to no avail. How do I accomplish the following?
I have two DIVs side-by-side which I want to size automatically according to the width of their contents (was using "display: inline-block" for that). Then, I want the contents of each of those DIVs aligned to the top of the DIV (by default, the contents are bottom-aligned). The contents are a number of labels (spans) and text (database data). Also, these two DIVs should stay to the right of another DIV on the left of the page which is the menu.
MENU AUTO ANOTHER
FIXED WIDTH COLUMN (DIV)
WIDTH DIV ALSO
DIV ACCORDING AUTO
TO SIZED
CONTENTS TOP-ALIGNED
TOP-ALIGNED CONTENTS
CONTENTS SOME
SOME PADDING
PADDING TO TO MY LEFT
MY LEFT AND AND RIGHT
RIGHT
you have to vertical-align:top the parent (column) div, as well as the spans on the inside. display:inline-block makes width and height go to auto (like an inline element), and as you said default vertical align is baseline.
http://jsfiddle.net/EjdUf/1/
In reference to the attached screenshot:
I want the position of the wrapper with the grey background to have a fixed width so that it aligns with the width of the pagination element above it. Right now the width depends on the size of the children elements (the text or the text field).
In general, how would you accomplish this?
Provided both sections are contined within the same container div, use a style of:
width:100%
Otherwise just specify your width to be the same as the pagination element...