I have a two column layout that has 'tiles' within the columns. These tiles are floating divs as well. The desired result is a very tabular layout without using tables.... Like so:
Question: Why in the linked fiddle is my first tile being rendered outside of my container divs?
<div class="column1"></div>
<div class="column2"> <!-- I am floating next to column1 -->
<div class="tile-container">
<div class="tile1"></div>
<div class="tile2"></div> <!-- I am floating next to tile1 within column2 -->
</div>
</div>
FIDDLE
How about http://jsfiddle.net/KtDhX/8/
I've added a #wrapper around your divs and gave it a 1000px width.
I've floated your second column left and your first right and floated both the tiles left so they won't leave their container.
Also try looking into display: inline-block to avoid the sometimes buggy behaviour of float and enables you to remove the position: relative.
My issue was solved by applying float:left to all container div's and tiles div's. This is per CSS 2.1 Specs.
Related
So imagine a bootstrap column full of elements (divs, paragraphs, links.. ) how do I space those elements equally inside that column, like space-between alignment or space-around. I don't want margins or padding. I want elements to automatically equally space around the free space vertically inside a column.
In the documentation for flex everything seems to be focused on rows and what little there is for columns it's aligning elements inside a column horizontally.
Any ideas how I can get the desired effect?
The solution could be adding flex positioning to your column as well. So you can add those additional classes that are provided by bootstrap.
<div class="container">
<div class="row">
<div class="col d-flex flex-column justify-content-between">
<!-- Here comes your content -->
</div>
</div>
</div>
Since you want to evenly space the element is the y axis, you need to add flex-column. Also remember you can nest any number of flex boxes inside another.
I've built a page using bootstrap 4. I've added a Carousel with 4 items.
You can see it here: Landing-Page with Bootstrap 4
And here is the Problem: when loading is finished, you'll have some space over the edge. I will say, that you can scroll to the right side and there is more space, that shouldn't.
What I've tried to fix it:
removing slide buttons
using other typs of the carousel
changing pictures/resizing them
commented out other elements like divs and navs, except the carousel
tried other browsers (firefox, chrome, safari)
I hope, it's not a bug.
Thanks for your help
The problem does not appear because of the margins of any row ( as suggested in your accepted answer ) but because some of the rows are not nested inside containers.
See here in the docs grid system bs4
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
And also here bs4 containers where it clearly states that Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
In short the padding of the containers counteract the negative margins of the rows that in turn counteract the paddings of the columns
SOLUTION
Any top-level row you have, you should wrap it inside a container, in your case you should use container-fluid
You can fix the problem by looking at the element #ausbildung (between container and jumbotron).
Its width is 30px bigger than it should!
Try to remove the margins on it.
<div id="ausbildung" class="row" style="height: 50px;"></div>
Bootstrap .row classes use negative margins to account for child elements that contain padding by default. Override the .row styling with
.row {
margin-left: 0px;
margin-right: 0px;
}
and the space and horizontal scrollbar should disappear. Bear in mind if you use .row elsewhere with Bootstrap col's that you may have to adjust your col's accordingly.
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
The objective of the HTML below is to have on the same horizontal line the red and the blue divs, even thought the blue div is truncated on the right due to a large width. This jsfiddle shows that even though the black/container style has overflow:hidden the blue div is not truncated. What's wrong with this HTML?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
Floated elements will stack horizontally until the edge of their parent container is reached. At that point, the next floated element will fall down to the next line and the remaining elements will again stack next to each other.
In order to achieve the effect you're looking for, you're going to need a parent container for the floats that is wide enough to contain all the floats.
THEN, and only then, can you place another container around the parent that will clip the overflow.
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>
http://jsfiddle.net/THEtheChad/me4gj/7/
Floats bump down to the next line when there isn't sufficient room in the parent to contain them.
When you use float: and the parent div or object doesn't have the space to go ahead and display it all it just displays everything on the next line or into the next area.
Maybe just adding some more to your height values would fix it or subsequently toning down the size of the objects included in that area.
First of all, the inner divs are wrapping because of the width of container -- which is the basic behavior of float.
Also, "overflow:hidden" works in a different way in your code.
When contents have float: left or right and the container has overflow:hidden, then the container automatically wraps whole the contents instead of hiding contents.
For more details, please check out All About Floats
If you have two divs contained within a div:
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;">
<div style="float:left;background-color:red;width:20px;height:20px;">
</div>
The two inner divs are rendered as 'invisible', as in the container div doesn't stretch to allow them to fill, as if they were not there. This creates ugly overlaps/whitespace etc.
How do you go about resolving this issue?
Insert the third div:
<div style="clear:both;"></div>
I think it may be because you are forgetting to close the tags, try this:
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>
Try to add the <br style="clear:both"/>, (or clear left) it is a common method to give life to floated elements within a container
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<br style="clear:both"/>
</div>
Parent elements are never to expand to contain floated children. While IE<8 does do this, that's a long standing bug (one of millions) in that inept browser. The best solutions are to float the parent, set the height/width, or use overflow:auto in the CSS.
The outer div isn't floated, so unless you explicitly set a height it won't display in this case (other than the border). Either set height of outer div to 20px or float it.
Is there a reason why you aren't/can't put any content in the divs? They overlap / are displayed invisible since there is no content.
<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:blue;width:20px;height:20px;"></div>
</div>
Will show the two divs next to eachother (Tested IE6, Chrome 3, Firefox 3.5, IE7)