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;
}
Related
I have container with css elements. All of the elements has display: inline-block property. The problem is that one of the element is twice hire than the rest and instead of having two elements on the side I have only one and a lot of white space. This is how it looks:
my css is:
.productBlock {
display: inline-block;
background-color: darkgray;
height: 271px;
width: 161px;
margin: 3px;
}
.productBlock-higher {
background-color: darksalmon;
height: 548px;
width: 161px;
margin: 3px;
display: inline-block;
}
How can I remove the white space and add element another element there?
I would like to add move two elements on the right side of the higher div. It should look like this:
if I understand correctly, you need to set the vertical align top
https://codepen.io/opmasan/pen/vYNvbpZ
.productBlock {
vertical-align: top;
}
I solved it. I added:
.productBlock-higher {
float: left;
}
As the title tells you, I want to center a parent div where the parent div retrieves the width of all its child divs.
This is the code I used to retrieve the width of the child divs:
.parent
{
background-color: yellow;
display: inline-block;
font-size: 0;
/*How could I center this div? I used to do: margin-left: auto; margin-right: auto;
however for this I need to assign a fixed width. I want to assign the width of the
content inside the div.*/
}
.child
{
height: 100px;
width: 100px;
border: 1px solid red;
display: inline-block;
}
Source: http://jsfiddle.net/53me4f8e/
How can I center this div?
Centrally align the text of the parent element, in this case, body. .parent is displayed as an inline-block, which means it behaves like an inline element and is therefore centred:
body{
text-align: center;
}
Note, because text-align is inherited, you may want to revert the text alignment back to left (or right, depending on preference) for .parent:
.parent{
text-align: left;
/* Other styles.. */
}
JSFiddle
This should be:
.parent{
display: block;
text-align:center;
}
updated your fiddle
I am trying to make an image scroller and I am stuck with my CSS side of things. The current CSS that I have is making them going under each other not next to each other and I can't figure out how to make it work that way.
The Images are stored in a div of themselves which are under a another div called imageScroller and the imageScroller div is under the Content div.
Here is the CSS of the following divs
#content
{
text-align: center;
padding: 20px;
}
#imageScroller{
margin: 0 auto;
width: 850px;
height: 250px;
overflow: hidden;
}
.image{
float: left;
}
I think what you want is achieved by adding white-space: nowrap to #imageSlider and changing .image so that instead of float: left, it is display: inline-block.
Here's a fiddle. Adjust as needed.
The font-size: 0 in #imageSlider is to get rid of extra white space in between the <div>s.
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.
I'm trying to do a 4-frame design with css, as in this code:
http://jsfiddle.net/7qBKJ/1/
But I don't want to use position:absolute;, and I'm trying to do it like this:
topframe: block;
left,right and centerframes: inline-block;
And I want to ensure there is, say, 200px of width in both rightframe and leftframe, and the remaining parts should be filled by centerframe. How can I manage this without absolute positioning?
I tried this, but it moves the frames up and down, when the screen width decreases :
http://jsfiddle.net/V4vAc/2/
in this fiddle, centerframe aligns with leftframe, since they are both inline-block, with centerframe rule margin-left:0px; but I have no idea how to set centerframe's right to align with rightframe's left, without specifying a width.
So how can I make #centerframe's width equal to screen width - 400 px ?
Thanks !
What you have to do is to put both sidebars first in the flow of the document. Then you float the first sidebar right and the second one left.
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
/* main.css */
#left {
width: 200px;
height: 100px;
background-color: blue;
float: left;
}
#right {
width: 200px;
height: 100px;
background-color: red;
float: right;
}
#center {
width: auto;
height: 100px;
background-color: green;
margin: 0 200px;
}
http://jsfiddle.net/samgh/JjsFF/
If you want center to be the full width underneath the two sidebars, you can remove the margins. Hope this helps.