This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to deal with floated elements?
I have a probably basic html css styling question:
If I have:
<div class="container">
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
</div>
Then... when I style the columns with a background-color they get the background color.
BUT the container somehow does not stretch until the bottom of the content: it only fills content with a background color or any other property if I put "content" in it e.g.:
<div class="container">
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
one line of background color
</div>
Now I get one line behind the whole thing that is "green" while I want it to stretch the complete thing.
Why does the container not know where the bottom is? Is there anything I can do here?
If you've floated the inner divs, you'll need to add overflow: auto to the container element.
You need to clear your floats. I usually just overflow:hidden the container.
Related
I want to create a faq page like Twitter's FAQ. The left column stays on that position even though the user keep scrolling.
So far here's what I made but it doesn't work.
<template>
<div>header here</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div style="position: sticky;">
1 of 2
</div>
</div>
<div class="col-lg-8">
2 of 2
</div>
</div>
</div>
</template>
According to this, we should add sticky property, but it doesn't work.
edit: I think it's because the two columns have the same height, so adding sticky property does not work. Any solutions on how to make the column height fit to the content only?
Any solution? Thank you!!
Position Sticky is not working on col-sm-4 because its parent class row has display:flex property. if you change
display:flex
to
display:block
then position Sticky property will work but it will change your design
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
I have bootstrap container (div class="container") and there are two rows (div class="row").
But between those rows I need one full width horizontal line. Full width - I mean that it should be full width - outside container. This line is just for design issues, it would have background color and that is it. I do not know how to create it.
Divide your content into 2:
<div class="container">
<div class="row">
stuff here
</div>
</div>
<div class="line"></div>
<div class="container">
<div class="row">
stuff here
</div>
</div>
I did the below it worked,
<div class="container_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
</div>
result: Two boxes inside with 10px left and right margin appeared.
Question 1:
Below does not work, one box is pushed below another why? What should i do to fix it?
<div class="container_12">
<div class="grid_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
</div>
</div>
Question 2:
With the MarkUp 1, which i stated at start of question i substitued the text with Google visualization charts, they behave like Question1. One chart is pushed below another.
Question 3
Do i always have to specify clears after the the grids ads up to containers width. for example,
<div class="container_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
<div class="clear"></div>
<div class="grid_12"></div>
</div>
Question 4
I have heard that clearfix does the same as clearing, where do i use it on the parent container or the divs inside them?
Question 1
You need to add a class of "alpha" on the first div to remove the left margin and a class of "omega" on the last div to remove the right margin.
Whenever you are nesting divs you need to add alpha and omega classes to the first and last divs.
<div class="container_12">
<div class="grid_12">
<div class="grid_6 alpha">Some Text</div>
<div class="grid_6 omega">Some Text</div>
</div>
</div>
Question 2
This may be because the content ie the charts are wider than the div.
Question 3
Use a clear div when only when you want to clear all the elements above it.
Question 4
Whenever you have a div with floated elements inside it you can give it a class of clearfix to clear everything inside.
How can I get the content div to get at the bottom instead of that odd position?
http://jsfiddle.net/madprops/6FFXL/1/
<div>
<div style='float:left'>name </div>
<div style='float:left'>date </div>
<div style='float:left'>comments </div>
</div>
<div id="contenido" style="font-size:20px;">content</div>
EDIT: removed float:top
It is at the bottom for me in your example, (FF5), but you should probably make it safe by setting content to clear your floated divs, like this:
<div id="contenido" style="font-size:20px;clear:both;">content</div>
Also, the float:top on your first div is invalid, there is no top property of float.