I'm trying to get a button to position at the bottom of a div.
I'm using the position:absolute for the button and setting the parent div to position:relative.
But for some reason, the button at the bottom overlaps over the content once the content extends down. I'm not sure what's causing it to overlap.
Here's a fiddle: http://jsfiddle.net/LHxeP/8/
Here's my CSS:
.a{
width: 33%;
float: left;
border: 1px solid red;
position: relative;
text-align: center;
padding: 2%;
}
img {
display: block;
width: 100%;
max-width:150px;
height: auto;
margin: 2% auto;
}
.button{
position: absolute;
bottom: 5px;
background: green;
display: block;
left: 50%;
width: 50%;
margin-left: -25%;
border-radius:10px;
}
I'm not sure if it has something to do with the initial height being set on the parent elements either. I know that some of the content will vary within each div which will extend the height of the div.
I have a jQuery script that will check the longest height parent div and then the rest of the child elements to match the longest div, hence the inline height.
I hope that makes sense. It's been a long night.
http://jsfiddle.net/LHxeP/9/
the absolute position of the button makes the button be over the div content
because you use position absolute, you must increase the height of the div (to reserve some space for the button)
.a {
width: 33%;
float: left;
border: 1px solid red;
position: relative;
text-align: center;
padding: 2%;
padding-bottom: 50px;
}
i added padding-bottom: 50px; to reserve some bottom space ... you may change the value, depending on how big the button is
Firstly, don't use the inline CSS if possible. put the height value in your '.a' class (also you might want to consider renaming '.a' since that is very similar to the link element <a>).
Secondly, and in response to your specific problem, set the height attribute of your 'a' class to auto and it will accommodate for the height of your content.
.a{
width: 33%;
height: auto;
float: left;
...
That happens because you are setting a fixed height in the div, so the position absolute of the button causes the overlapping when the content of de div exceeds the height set.
I recommend use overflow: scroll if you want a fixed height, and you could set the button in the top of the content and just under the image. Doing this you don't need to set position:absolute to the button. Maybe it is not the best solution, but I hope this helps.
Related
How can I prevent the picture from jumping down, when the window gets smaller? I know I haven't used float: right, but that's because the content was too far away from the navi bar then. Do I have to use another div, make that float on the right, and then center the content into it by using margin auto? Or is there any way to prevent browsers from letting the content "jump"?
body {
background-color: #B3B3B3;
}
#links {
float: left;
width: 300px;
height: 200px;
background-color: #e8e8e8;
}
#rechts {
float: right;
width: 500px;
height: 200px;
background-color: red;
}
<div id="links"></div>
<div id="rechts"></div>
Because you use float.
Float depend on width of browsers.Your picture will jump down when browser not enough width.
You should use attribute Position ( absolute or fixed)
You can see this examble: (I use Fixed in this examble)
position:fixed;
https://jsfiddle.net/xe7jxwra/
Some information about Position in CSS:
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html
In your request, you should set your parent of content to Relative, and set your content is Absolute
You can fixed the your navigation bar and put padding-left (navigation bar's width 300px) to the #rechts and remove the margin-left. Like below
#links {
float: left;
width: 300px;
height: 100%;
background-color: #e8e8e8;
box-shadow: 8px 0 10px -4px rgba(0, 0, 0, 0.5);
position: fixed;
}
#rechts {
padding-left: 300px;
font-size: medium;
}
I set a width & height to the parent images div. There are two child divs inside of it called image_one and image_two with a set width. The problem is that when I reduce the width of the viewport, the image_two div escapes the parent div and comes under the image_one div. How do I keep this div from escaping? I figured that setting a percentage width would automatically resize the div to stay inside of the parent div. When I set an overflow:hidden, both of the divs disappear.
Here is a link to the code:
http://codepen.io/matosmtz/pen/ZGpNmy
<div class="images">
<div class="image_one">
<p style="background-color:red; text-align:center">Photo</p>
</div>
<div class="image_two">
<p style="background-color:red; text-align:center">Photo</p>
</div>
</div>
.images {
padding: 0;
margin: 0;
width: 100%;
height: 220px;
}
.image_one {
width: 30%;
height: 200px;
position: relative;
background-color: black;
padding: 5px;
float: left;
margin: 5px;
}
.image_two {
width: 30%;
height: 200px;
position: relative;
background-color: black;
padding: 5px;
float: left;
margin: 5px;
}
The .images div is 100% width. This includes the sidebar on your codepen.
The child divs are 30%, but this means 30% of the whole space. So when you reduce the size of the browser, eventually they are big enough to need to slide under one another, because your .sidebar has a fixed width of 200px.
I would suggest having a look at how the Bootstrap CSS works in order to find your fix for this, or straight out using that.
<div class="vid-thumb-lg">
<div class="vid-thumb">
<img src="./images/hqdefault.jpg">
</div>
</div>
Vid-thumb-lg: is parent div for my img and its caption inline
Vid-thumb: is div where image is actually contained
I want to stretch image size without setting width/height of parent div. I have used following code of CSS:
.vid-thumb {
float: left;
border: 1px solid #333;
position: relative;
overflow: hidden;
background: #f1f1f1;
vertical-align: middle;
display: inline;
}
.vid-thumb img {
margin-top: -46px;
overflow: hidden;
position: relative;
}
But still image size is larger, I need to shrink image from to, left, right, bottom.
You need to set the width and height of the container, OR the dimensions of the first container vid-thumb-lg.
Then, if you don't want to use precise px size, use percentage.
Fill the container =
width: 100%;
height: 100%;
Instead, if you are talking about that little space on the bottom of the div.. is an invisible blank space you have by default in divs. You can remove it with:
div {
line-height: 0;
}
Do you mean like this?
http://jsfiddle.net/x59zLtn8/2/
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
I have to divs layouted as display: inline-block. Intentionally, I want these two divs (tileImage, title) to share the 300px width of the parent div (preview). Thus, I have set their width to 50%. For some reason the second div is moved to the next line.
Changing the width of div "title" to 48% will move the div next to the div "titleImage". There you notice the space in between. Where does this space come from? How do I get rid of it?
Here is the JFiddle: http://jsfiddle.net/SFDPe/2/
Thanks!
You should float your elements to the left and right, instead. Then, make sure you set height: auto; and overflow: auto; to the parent container. This ensures that the .parent container actually overflows and grows automatically when elements are floated inside of it.
JSfiddle here.
.preview {
width: 300px;
border: 1px solid red;
vertical-align: top;
height: auto;
overflow: auto;
}
.title {
width: 50%;
background-color: olive;
float: right;
}
.tileImage {
width: 50%;
background-color: orange;
float: left;
}
Instead of using display:inline-block use, float:left for both divs.
http://jsfiddle.net/SFDPe/3/
Take a look onto this article:
Fighting the Space Between Inline Block Elements
Maybe you can use float: left; instead? Like this:
.preview, .preview div {
float: left;
}