Make floated element in column layout ride up to meet element above - javascript

Say I have 3 div elements that all have width:50% but have undefined heights. Now say these elements all have the attribute float:left.
Due to the width:50% attribute, the three elements are now in a two column layout, the first element sits left of the second, and the third sits below both the first.
Now, if the first div is 50px tall, and the second div is 200px tall, the third div sits below the line created by the taller div, and thus a big white space of 150px is created between div 1 and div 3.
How can one prevent the white space from occurring?
PS, the divs are being generated dynamically!
Here's a jsfiddle

make the Second element float right
See that Working Fiddle
HTML:
<div class="First"></div>
<div class="Second"></div>
<div class="Third"></div>
CSS:
div
{
float: left;
width: 50%;
}
.First
{
height: 50px;
background-color: red;
}
.Second
{
height: 90px;
background-color: yellow;
float: right;
}
.Third
{
height: 50px;
background-color: green;
}
Edit: If you have an unknown number of div's,
something like this HTML (alter the sizes as you want)
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
Just use this CSS:
div
{
width: 48%;
margin: 1%;
background-color: #09F;
}
div:nth-child(odd)
{
float: left;
}
div:nth-child(even)
{
float: right;
}
Check out this Working Fiddle

Related

How to hide thoes children elements that exceed the paraent's width in CSS

The parent has red dashed border, and the children elements are filled with blue. It can be implemented by inline-block, float, flex, etc.
I want to implement such effect: when the parent's width gets too small to contain the last children element, then the last element will be hidden.
How to implement this with pure CSS or with minimal JavaScript?
There is a way to do this using max-width, max-height and overflow, like the example below:
.parent {
max-width: 400px;
max-height: 60px;
overflow: hidden;
border: 1px dashed #ddd;
}
.child {
width: 100px;
height: 50px;
margin: 5px;
background-color: blue;
display: inline-block;
color: white;
text-align: center;
}
<p>There are 5 items here</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
And here is another example using flex instead of display: inline block; with max-width, max-height and overflow too
.parent {
display: flex;
border: 1px dashed #ccc;
max-width: 380px;
max-height: 60px;
overflow: hidden;
flex-wrap: wrap;
}
.child {
background-color: blue;
width: 100px;
height: 50px;
margin: 5px;
}
<pAnother example, using flex, with 5 items too</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
If your html structure is static, you can try to look into media queries.
Otherwise, i'm not sure it would be possible in CSS.
Using overflow: hidden on your parent element will not make the last child desappear until it totaly overflow.
Setting the overflow property of the parent container to hidden can do that for you.

How can I put a div block below another lined up vertically when they are touch and are on the same line?

Here is the html and css code:
HTML:
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
CSS:
#box1 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: left;
margin-left: 100px;
}
#box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
display: block;
float: right;
margin-right: 100px;
}
So this shows two blocks on the same horizontal line. When I minimize the browser window by dragging the window to the left, it gets to the point where the two divs touch.
Once they touch, the one on the right goes UNDER the one on the left, but not vertically aligned. Like this:
right after touch
My question is, how can I make it so that when the boxes touch, the right div goes DIRECTLY underneath the left div and stays until I arrange the window width big enough. I want it to stay like this when they touch:
want
I couldn't find a bootstrap doc for this. I want to use the two boxes to contain a dropdown select menu (I already know how to do this). Let me know if you know of a bootstrap class that can suit my needs or a way to fix the code that I provided. I'm open to suggestions in jQuery and Js. Let me know if my question wasn't clear and I will be responding. Thank you.
This is a good time to use display: flex see fiddle https://jsfiddle.net/cvnrwo13/5/
<body>
<div class="wrapper">
<div id="box1"></div>
<div id="box2"></div>
</div>
</body>
CSS
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 100px 0 100px
}
#box1, #box2 {
width: 500px;
height: 250px;
background-color: #75A9F9;
margin-top: 100px;
border-radius: 5px;
}
For this, a good option would be to use a container with a specified width and text-align: center. Then en lieu of floats, set the boxes to be display:inline-block elements. As inline elements, they will then follow whatever text alignment their parent container specifies.
HTML
<body>
<div id="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
CSS
#container{
text-align:center;
width: 100%;
}
#container .box {
width: 300px;
height: 150px;
background-color: #75A9F9;
margin-top: 50px;
border-radius: 5px;
display: inline-block;
}
https://jsfiddle.net/qacnL2yr/

Resize divs related to parent divs with jQuery

So I have 4 divs. I want to change the size of the inner divs compared to parent divs.
I want to dynamically change the child div size related to parent's one.
Now I've added .top class, but I don't really know if its needed or if it will be useful.
Here is the fiddle I'm testing with
http://jsfiddle.net/y3597/171/
jQuery below
$(".top").each(function () {
$('.object').width($(".inner").parent().width());
});
CSS below:
.container1 { width: 200px; background: red; padding: 2px; }
.container2 { width: 225px; background: purple; padding: 2px; }
.container3 { width: 250px; background: blue; padding: 2px; }
.container4 { width: 275px; background: black; padding: 2px; }
/* top ? */
.inner { width: 150px; background: gray; }
.object { width: 100px; background: green; }
HTML below:
<div class="container1 top">
<div class="inner">
<div class="object">Text 1</div>
</div>
<div class="container2 top">
<div class="inner">
<div class="object">Text 2</div>
</div>
<div class="container3 top">
<div class="inner">
<div class="object">Text 3</div>
</div>
<div class="container4 top">
<div class="inner">
<div class="object">Text 4</div>
</div>
I think that you are trying to achieve this:
$(".top").each(function () {
$(this).find(".object").width($(this).width());
});
In your code jQuery will check for every element with .object class in DOM on each loop. When you use (this) you are refering to element that is currently "selected" in loop.
Better way to achive this is to set widths od children to 100%, so they will inherit the witdhs from parents.

DIV centered when other div removed

I have two div's next to each other - left one and right one.
There is possibility, that the right one will be gone, then i want the left one to be centered.
HTML
<div class="contener">
<div class="left"></div>
<div class="right></div>
</div>
CSS:
.left {
width: 75%;
height: 240px;
float: left;
}
.right {
width: 25%;
height: 250px;
float: right;
}
.contender{
text-align:center;
}
.left {
width: 75%;
height: 240px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
.right {
width: 25%;
height: 250px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
the asterisk(*) is used to fix ie7 so it's a bit of a hack.
You can set the display property of .left and .right to inline-block and set the text-align:center for the parent element as jayaguilar pointed out. However, not that this won't work with the exact html and css you've.
You need to either remove the line break between inline elements in your html markup as follows:
<div class="container">
<div class="left"></div><div class="right"></div>
</div>
or comment it out
<div class="container">
<div class="left"></div><!--
--><div class="right">
</div>
or reduce their width to something less than 100% in order to accommodate the whitespace after inline-block elements.
Demo (click the remove button)
<div class="contener">
<div class="left"></div>
<div class="right"></div>
</div>
And now some easy jQuery:
$(".right").click(function() {
$(this).hide();
$(".left").css({ 'text-align': 'center'});
});
So with that we make "desapear" the right one, and then you do what you want with the left one! :)

html table and div's

I have the following problem: I have a table with a fixed width and height, which should be in the middle.
The right of it should be div, with a width from the right edge of the table to the left edge of the browser, but it is necessary that in this div image was cropped on the right (so that only the left side, the size of div)
On the left side of the table you need the same thing in reverse, as well as lower
Here's what it looks like - http://db.tt/bZU8Z9SJ
How can you do?
Alright, to give you some more of an answer, make a basic layout with divs:
<div id="container">
<div id="left"></div>
<div id="table"> <!-- Your table here --> </div>
<div id="right"></div>
</div>
And add some CSS:
#table{
float: left;
width: 50%;
height: 200px;
}
#left{
float: left;
background: #3f3;
width: 25%;
height: 200px;
background-position: right;
}
#right{
float: left;
background: #f3f;
width: 25%;
height: 200px;
background-position: left;
}
Fiddle here: http://jsfiddle.net/ycS2N/

Categories