I have an html page. This page has the following structure:
<body>
<div id="div1">....</div>
<div id="div2">
<table>...</table>
</div>
<div id="div3">....</div>
</body>
The div are one beneath the other,they have a border, and their's width are the same.
User can grow the columns of the table, which is inside the div2. In this situation the width of the div1 resized (border grows).
However the other divs' width remain the same.
How i can make them follow the width of the div2?
div 1 and 3' width is not dependant of div 2 as they are their own boxes, you have to link the boxes somehow (all three are part of body, but body may be bigger than your table at all times so linking their width to body may not work on certain browsers/versions)
Without javascript: create a bigger div that contains div1, 2 and 3, set the width of the other divs to that of the bigger div using CSS, whenever the table grows/shrinks div 2 will grow/shrink and push the boundaries of its parent div. Because div 1 and 3 copy their width from the bigger one, they will grow/shrink as well.
With javascript: Just set the width of the other divs whenever you modify the table's, tables can't be resized usually so you must be using some javascript there
In all cases, research CSS because that's what you will be changing.
Related
I have been trying so many different solutions to solve this problem without reaching any solution that actually works so I cant post any css (since its not working properly, so I dont even know if its the correct "way" to build further on anyway).
Case: One div with width 100% (its parent varies in size) with two children inside. The div should never exceed hight of one text line/ text row.
<div class="parent">
<div class="child">Text from left</div>
<div class="child">Text from right</div>
</div>
Goal: Make the children divs auto adjust to fit as much text as possible (on that one row) and if the childrens width together exceed its parent div width then hide the overflowing text in second child with ellipsis.
Is this possible with pure CSS? With script I sort it but not with only CSS.
Thanks (sorry for bad english).
I have 2 divs side by side. The first div contains text. The height of this div can vary, depending on how much text it contains.
The second div contains an image.
I would like the image to be the same height as the first div.
Is there a way to do that in css ?
I use bootstrap grid system. Both divs have the col-md-6 class.
I encountered a problem about float style. Like the html code below:
...
<body>
<div style="float:left;width:25%;height:100px;background-color:red;"></div>
<div style="float:left;width:74%;height:100px;border:1px solid black;">
<div style="width:1000px;height:50px;background-color:yellow;"></div>
<div style="clear:both;"></div>
</div>
</body>
...
The effect is that the content in the 2th float div overflow.
Yellow div is in the float div, but its width exceeds its parent's.
I want to know how to set the css style to make the 2th float div can suite its child element's width/height automatically?
I know clear style can clear the float of divs listed by order, but how to handle it when it contains a larger child?
I don't want to use js to modify parent div's width.
You can achieve this by using min-height and min-width. This way the parent will always fit the children's height and width when they are bigger.
Check it out here.
By removing width and height property (or setting min-heigh and min-width property as Stephan mentioned you will made parent div to stretch over child.
http://jsfiddle.net/5ohtx2nc/1/
This however cause that if they are wider than screen second floated div will move to next row
http://jsfiddle.net/5ohtx2nc/
If you insist on having two divs one next to another you will need to do some tricks like in How to position two divs side by side where the second width is 100%?
http://jsfiddle.net/5ohtx2nc/3/
I have an absolute div as the main content area on my page design. I have another div that occupies the top portion and which is 450px in height. I cannot know the height of absolute div before page load, so will only be able to find it out after page load has happened.
Now the problem is that my body also occupies 450px (height), so if I want to display something after the absolute div has ended I am unable to do so.
Summary :
Absolute Div : 600px (for example, don't know the actual height) Has position:absolute.
Top Div : 450px (No position:absolute)
Body Becomes 450 px as expected
How do I place a div below the absolute div. Currently the only thing I can think of is jQuery.
Here is a jsfiddle I made to the illustrate the problem. Even though the whole body displays blue, if you fire up the developer tool and inspect, you'll see that the html and body both occupy
UPDATE : Linky I'm trying to display the main content area above a few elements. Those circles that you see are seperate elements. And they need to stay that way.
I think you need to learn more about the positions!
Anyhow the current problem you are referring to will be solve if you change the position to relative!
<div id="First Div" style="height:100px;width:50px;position:relative;background-color:green;">
</div>
<div id="BelowDiv" style="height:100px;width:50px;position:relative;background-color:pink;">
</div>
But if you really need to place it somewhere static or in another word "absolute", then you need to place a container div and set the position to absolute, then place the other two or even more or inside the container Div.
<div id="container" style="position:absolute; top:y; left:x">
<div id="FirstDiv" style="position:relative;></div>
<div id="SecondDiv" style="position:relative;></div>
</div>
You can use jquery to append tags to your container. here is the sample link to do it!
If it didn't help try the height:auto and also overflow:visible for your container!
I have a page with two divs "list_events" and "right_content" one next to each other.
When I resize the window "right_content" moves down "list_events" but i dont want that!
I dont want those two divs to move neither to scale down on window resizement..how can I achieve that?
this is the code
.list_events{margin-left:1em;float:left;}
.right_content{float:left;margin-left:1em;}
thanks
Luca
first add a parent div/wrap and put those two divs of yours into it.
like so:
<div id="wrap">
<div id="list_events"></div>
<div id="right_content"></div>
</div>
then you can try the
min-width(px/ems/ etc) on the parent/wrapper div like so:
#wrap{
min-width: 600px;
}
Overall, whatever size you add to the min-width itll scale the parent div down to the size specified.
once the window is sized down past your specified size, itll behave like any other window.
this is my way of doing it.
You can put this divs inside parent div with fixed width/height for that div, or you can determine a percentage width/height for each two divs.