I'm trying to place buttons on the left and the right side of a scrollable div. See this jsfiddle[1] where they are still wrapped. So I changed the display of content and btn to inline-block. See this next version of the jsfiddle[2]. That sort of worked, but the buttons are not nicely aligned. And I actually don't have any idea why. So how come and why is that?
I am confused with you saying buttons are not nicely outlined, but I guess you meant align, than you have to use vertical-align: top; as you are using display: inline-block; so your buttons are aligned to the baseline.
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
Demo
You can also float all your elements to the left as #Jarno suggested, but if you are going with float than make sure you clear your elements using clear: both; property, else you will end up with undesired positioning of your elements.
make all elements floating ~> DEMO
.content {
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: 40px;
display: inline-block;
float: left;
margin: 0 10px;
}
.btn {
width: 30px;
height: 40px;
display: inline-block;
float: left;
}
OR you can use vertical-align for elements to fit each other vertically
You could use float:left; on .content and .btn.
Also, don't forget to put overflow:hidden; on your .container.
Example
You need to add float positions to each .btn. float left for the left arrow and float right
Add the vertical align to the buttons:
.btn {
width: 30px;
height: 40px;
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/y84VA/7/
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;
}
I am trying to create multiple horizontal div elements on a page http://jsfiddle.net/bss6mc5a/
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { display: inline; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
The layout is how I would like it to be displayed however when I add text (remove the comment tag) to the the div is moving down when I would like it to stay in place.
Thank you for any assistance / correction in how I achieve this.
You need to define width for the divs:
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { float: left; width: 960px; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
Updated Fiddle:
http://jsfiddle.net/bss6mc5a/3/
Update 2:
http://jsfiddle.net/bss6mc5a/7/
Instead of trying to float your elements left or right, you can just set fixed location objects.
I updated your JSFiddle to do what I'm thinking will help.
Basically, your left and right content areas would normally have fixed width (though your images make up for that), and would be positioned absolutely to put them in the right place, then the content is just centered with:
margin-left: auto;
margin-right: auto;
width: 300px; /* some arbitary width */
But check out the Fiddle, see if that helps.
check this out I thing this what you want click Demo
Some changes in CSS
#body {
display: inline;
width: 960px;
float: left;
text-align: justify;
}
Hope this will help you...
give your body divs a display: inline-block;
http://jsfiddle.net/bss6mc5a/5/
#body-left {content:url(http://placehold.it/240x930);display: inline-block; vertical-align: top;} #body { display: inline-block; vertical-align: top; width: 30%;} #body-right {content:url(http://placehold.it/240x930); display: inline-block; vertical-align: top;}
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 make a header for my web page with one element in the middle of the header, and one right-justified in the header.
The only ways I could think of doing it was:
Using float - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
float: right;
}
Using absolute positioning - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
position: absolute;
right: 10px;
}
The problem is that with both of these methods, the social links/images no longer are vertically aligned to the header, but rather are hugging the top of the page despite me setting them to inline-block with a height of 100%, and vertical-align: middle. (source of my reasoning for trying this vertical align method)
With the float method, there appears to be the additional problem of the centered element not actually being horizontally centered within the header, but rather placed next to the social links and centered within its own div which is not what I'm looking for.
Any pointers on how I could achieve the desired result of having a horizontally centered element with right-justified elements all inline and vertically centered would be much appreciated!
one solution is to add relative to the Header Wrapper and positioning the social links properly using the absolute top value.
Updated JSfiddle
#homeHeader {
height: 75px;
padding: 10px;
text-align: center;
background-color: #181818;
border-bottom: 1px solid #505050;
position:relative;
}
#socialLinks {
position: absolute;
right: 10px;
top:50%;
margin-top:-20px; //considering the social links are 40px height
}
I have following fiddle: http://jsfiddle.net/BFSH4/
As you see there are two issues:
The h1 and h2 aren't vertically aligned.
The nav and the content aren't horzontal alligned.
For the 1. I already tried margin and padding. No success...
The second one also isn't that easy the common ways of floating and using inline-block don't work...
What am I doing wrong?
I finally managed floating the header. The problem was that hgroup isn't a block element.
However even it worked after all I think it is better to use a real image for the enterprise name and slogan.
Now only the issue with the horizontal alignment fails.
I don't know why:
http://jsfiddle.net/BFSH4/2/
I can do what I want there is no way that they wan't to be side by side!
Solution for your first problem (found here):
HTML
<div class="header">
<span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>
CSS
.header {
height: 160px;
border: 1px solid #8a2be2;
/* text-align: center; */
}
.header span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.header img {
display: inline-block;
height: 160px;
float: left; /* added, so the image will appear left to the text correctly */
}
.header hgroup {
margin: 0;
vertical-align: middle;
display: inline-block;
}
This solution depends on display: inline-block
Solution for the second problem:
.nav {
width: 229px;
display: block;
margin: 0 auto;
}
Live demo: http://jsfiddle.net/BFSH4/4/