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/
Related
I have a container DIV that is resizable. I allow the user to add DIV elements to it, to create some sort of a playlist. When the container DIV is not large enough for a content DIV to be appended, I want the content DIV to just get cut off at the end of the container DIV. Unfortunately it always gets appended underneath other content elements. I tried overflow:hidden; for the container element, but that didn't have any effect...
overflow:hidden;
is a good choice, but you need an inner container where contents can be added horizontally, an inner container larger than the visible outer one.
Fiddle
Add white-space:nowrap to your parent div. When you add children they will be appended without breaking to the next line - even if the parent container is not as wide as the width of the children divs.
FIDDLE
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.
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.
I need to place two repeated background images on the left and right border of a div. I don't know the width or the height of the div.
I though of placing the left border in the div, and floating the right border to the right.
This is my layout:
http://jsfiddle.net/WmLhV/
In Firefox it works ok, but in the other browsers, when the browser window is too short, and a scrollbar appears, the float disappears.
As you can see the container is of display: table-row. I cannot change this or the layout will break...
Is there any better way of putting an image to the right? even without a float?
your div with right align doesn't have height if you want to use 100% height you have to use position. check this fiddle i have done this via position http://jsfiddle.net/WmLhV/4/
Your <div> that's floated to the right doesn't have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn't.
One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.
A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text --- standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.
I have this type of arrangement
...<td>
<div></div>
<div></div>
<div></div>
</td>
The div tags are filled with dynamic data. I have put the div tags in the td cell because the center div is filled with an image, which can be different heights. What I am trying to do is get the top div to align to the top of the cell, the bottom div to align to the bottom, and the center div, which contains the image, to fill the entire space in the middle and be center aligned. All my attempts so far have failed and for some reason (yes I have looked and there is no competing styling) I cannot get the divs to fill the available space. I have tried encapsulating the divs in a container div but this didn't work either. Your advice/help please :)
Thanks, R.
there are some handy CSS properties you should look.
box-sizing (pls, start googling for this one).
margin, padding, vertical-align...
table-padding..
consider using "auto" as value for some centering.
The easiest way is to forget the divs and use table cells instead. The advantage here is that when you set a height to the table, the cells will automatically fill all the space. This way you can define a fixed height to the top and bottom cell, and the middle cell will take up the remaining space.
Example: http://jsfiddle.net/KaWPS/
And if you don't use fixed heights you'll see that the cells take whatever they can get, and the rest is divided over the rest of the cells: http://jsfiddle.net/KaWPS/2/