i have created a div of width 615px and 100px height. and i have created about 10 div inside that div of 90 * 80px. now the problem is that when the area of main div ends these small divs inside the main div flows down. i dont want to flows down i want that they will display in a row. if they over flow i will hidden them with using overflow hidden or i will give them horizontal scroll bar.
it looks something like this now
help please
Add another div inside your main div and wrapping the 10 internal divs. Set the width of this wrapper div to the width needed to accomodate all 10 internal divs.
Related
I would like to accomplish this design with only HTML & CSS.
It has to be full responsive, meaning:
The light grey div on the left, must be responsive and have a fixed padding-top and padding-bottom, depending on the content. ( if content becomes higher because of smaller screen sizes, the padding must remain and the div must grow ( together with the right div with the image ) ).
The light grey div on the left, must go outside the container, to the far left and fill the entire screen ( on the left side ). BUT the content of this div must align within the container of the page div.
The image on the right, must have the same size and the light grey div on the left, and contain an image, centered within the div.
Problems I encountered when trying, see link for code:
Adding a sibling div, next to the div with the content, and position absolute to the left of the screen with z-index -10. This div had no idea of the height of the content, so the paddings are not responsive. play tailwindcss
When adding the position absolute on the div with the content itself, I cannot align the content with the container of the rest of the page. play tailwindcss
... out of ideas. Any help?
I have one parent div and multiple child divs placed in one row. These child divs are created dynamically, and I don't know how many of them will be created in the moment of rendering page. I want parent div to have fixed width, and to have horizontal scrollbar in case all child divs are not visible. This works fine.
But when I have content inside my child div, that div moves down, and it's not alligned with other divs.
I'm not sure where is the problem?
Here's the jsFiddle example.
I tried to put position:absolute to inner content of child div, but that didn't help much.
I added:
div {
vertical-align:top;
}
http://jsfiddle.net/LSZZx/30/
I have a div (lets call it header), and another div (lets call is content). Now, the content div extends its height to its contents. Within header, i have an element that overlaps far into content, but content div doesnt extend with the elements overlapping from header. Heres the css i have so far:
.content {
height:auto;
}
Any suggestions?
http://jsfiddle.net/pgvZr/
header and content are siblings, so there is no way to have content expand with content that is part of header using just css
To solve your problem, you can:
use javascript to calculate the height content should have and set it dynamically
put header inside content and remove the fixed height of content
I'm not sure i understand the issue. You want to extend content height by adding text to header_inner?
The reason your "content" div isn't being pushed down is because you have a height set on your "header" div. So, relative to your "header" div, your "content" div is starting 100px down. If you don't set the height, then the "header" div ends up being the height of whatever is contained within it.
Take a look at this fiddle... simply removed your height: 100px; off the header and it accomplishes what you want. http://jsfiddle.net/pgvZr/4/
Edit: If you're adding content to the header and want it to be part of your content div (i.e have your content div grow with the header_inner text), then you should probably just move it into the content div. Otherwise, then you shouldn't specify the height on the header, and let it automatically push your content div down when you add the header_inner like my fiddle does.
That's because the child div has a higher z index than anything else, meaning its stacked way on top of everything and it doesn't participate in the document "flow" due to its positioning. I suggest use JQuery to calculate and set its height based on the heights of the other two divs.
I am trying to create a site layout using CSS. I have four (4) DIV elements. One is the main container that I have centered in the page and contains all the other DIV elements. Of the remaining three DIVs one is a page header, one is a left menu and the last holds content for the page. I would like to have the CONTENT DIV floated such that it is adjacent to the MENU DIV. However, I am finding that the width of the CONTENT DIV is not using the width I specified. I have created a sample running on JSFIDDLE which should make it easier to visualize.
http://jsfiddle.net/Rrgr7/
What I am trying to figure out is why the CONTENT DIV doesn't take up 600 pixels as I have defined? Thank you.
You have to float your content also. Your content div is 600 from the left not counting the float and if you add more text it will run down under the menu: example.
If you float it, then it will do what you want, but you have to be careful about sizes or it will float down under your menu.
If you just give it a 200px margin and no width, I think that would work best as it would use the remaining space and stay 200px from the left edge. The float doesn't push it further, the margin is from the container div.
I am currently trying to figure out an way to vertically align an div that is inside an div that has an dynamic height due to it's changing content.
So on this jsFiddle is the setup,
in the left div you have the content that is inside an wrapper element with an fixed width. Next to that div is another div, this is an wrapper for an image and a div element. And on the right is an element with an position absolute.
The idear is that the text "this is an image" is vertically aligned to the middle of the left div which is dynamic. I would like to do it with CSS but it seems impossible...
You can check out this fiddle to get some more info
http://jsfiddle.net/36sfx/2/
It seems that the only way to do it is displaying the div as table-cell. I have tried to solve this problem many times before, and I have read before that there are technicals limitation on this issue.