How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.
http://jsfiddle.net/MgcDU/4137/
HTML:
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-last">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
</div>
</div>
CSS:
.small-video-section {
height: 134px;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
display: inline-block;
}
.thumbnail-last {
width: 220px;
margin-top: 15px;
display: block;
}
Thanks. :)
You could use float: left or float: right
img {float: left;}
Note, you'll have to use clearfix which Mr Gallagher explains nicely or follow with any element that has clear: both; on it to get the results you expect.
You can position them absolutely
img {position: absolute;}
and then position one by one using left and right or margins
img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/
EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...
Changing display:block to display:inline-block in your .thumbnail-last rule will do it.
try float: left on the divs. That will get everyone to show up in line. other wise block elements introduce a break
Try this code :- Use only float:left
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-last" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
</div>
</div>
All your code are ok. But , I have only added style in HTML part.
Update link :-
http://jsfiddle.net/MgcDU/4148/
Its working fine.
It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form
Related
Here's what I got. I'm trying to center pandora, rocket league and chess.com in the #header div. Right now they're on the left.
<!DOCTYPE html>
<html>
<head></head>
<body>
<link type="text/css" rel="stylesheet" href="abc.css"/>
<div id="top"></div>
<div id="header">
<div class="hovimg">
<a href="https://www.chess.com">
Chess.com
<span>
<img src="https://tmp-m.org/wp-content/uploads/2015/02/chess.jpg" height="100px" width="180px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="https://www.pandora.com">
Pandora
<span>
<img src="https://c.slashgear.com/wp-content/uploads/2016/10/pandora-rebrand-980x420.png" height="100px" width="150px"/>
</span>
</a>
</div>
<div class="hovimg">
<a href="steam://rungameid/252950">
Rocket League
<span>
<img src="http://static5.gamespot.com/uploads/screen_kubrick/1551/15511094/2999833-20141023_rocketleague_01.jpg" height="120px" width="200"/>
</span>
</a>
</div>
</div>
<div id="left"></div>
</body>
</html>
I'm a little stuck trying to figure out exactly what you're after, but here's one solution that may be what you're after:
.header:after { /* Clearfix */
content: "";
display: table;
clear: both;
}
.hovimg {
width: calc(100% / 3);
float: left;
}
Note: Has not been tested, so it is possible this may not work, however at least the theory behind this idea should be of use.
I am not sure if that's what you are looking for.
<div id="header" style="text-align:center">
This will center the content of the header division.
If you want to add it to your CSS:
#header{
text-align: center;
}
If you want all content in the center then you can apply text-align: center to #header.
Try this:
.hovimg { text-align: center; }
That's the class of the block elements your a tags, spans and images (which are inline elements by default) are in - it should center them (all together - they are in one line).
I have 3 images that I want to align vertically however I can't seem to get it working properly. My images are split into 3 parts from 1 existing image. You can see slight transitions from one image to the other. What am I missing here?
HTML:
<div id="Wrapper" class="Wrapper">
<div id ="image-1">
<img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor border="0">
</div>
<div id ="image-2">
<img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png" class="jscolor border="0">
</div>
<div id ="image-3">
<img id="bot" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png" class="jscolor border="0">
</div>
</div>
JS Fiddle: https://jsfiddle.net/krvrp7eb/
Why this happens?
img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions:
Change the display from inline to other - add display: block for instance
Change the vertical-align property to top (default is baseline)
Shrink the text size to 0 by font-size: 0 on the containing block of the inline element.
Example
Add vertical-align: top to all the three images - see updated fiddle here and snippet below:
#image-1 img,
#image-2 img,
#image-3 img {
background-color: #00f;
vertical-align: top;
}
.image-1,
.image-2,
image-3 {
display: block;
}
.Wrapper {
vertical-align: middle;
display: block;
}
<div id="Wrapper" class="Wrapper">
<div id="image-1">
<img id="top" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/top.png" class="jscolor" border="0">
</div>
<div id="image-2">
<img id="mid" src="http://www.crystalcave.nl/wp-content/themes/shop-isle/mid.png " class="jscolor" border="0">
</div>
<div id="image-3">
<img id="bot " src="http://www.crystalcave.nl/wp-content/themes/shop-isle/bot.png " class="jscolor" border="0">
</div>
</div>
Add the following to your CSS:
.Wrapper {
font-size:0;
}
JSFIDDLE
just add one css property in this
image-1 img, #image-2 img, #image-3 img
to
float: left;
use position: relative; and use top, bottom left, and right to adjust its position.
This is the problem I am having: I am able to align 2 images side by side, but I would like it, if 1 of them is floating to the left and the other to the right.
If someone can make an example of it, I will appreciate it very much.
Here is my code:
<div class="image123">
<div class="imageContainer">
<img src="../images/over_mijzelf.gif" height="188" width="600" />
<p>#</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="../images/mijn_hond.gif"/ height="188" width="600" />
<p>#</p>
</div>
</div>
Style:
<style>
.imageContainer {
float: left;
}
.imageContainer {
float: right;
}
p {
text-align: center;
}
<style/>
The issue is that you are applying conflicting styles to the exact same CSS class, imageContainer. CSS classes define a single set of behaviors that apply to multiple elements, so one class cannot define both float: left and float: right. One easy way to fix this is to break your class into two, one for each object, so for instance imageContainerLeft and imageContainerRight.
Here is a live JSFiddle demo of how this would work: https://jsfiddle.net/2q18dqju/
Here is how you would change your code:
<div class="image123">
<div class="imageContainerLeft">
<img src="../images/over_mijzelf.gif" height="188" width="600" />
<p>#</p>
</div>
<div class="imageContainerRight">
<img class="middle-img" src="../images/mijn_hond.gif"/ height="188" width="600" />
<p>#</p>
</div>
</div>
CSS:
.imageContainerLeft {
float: left;
}
.imageContainerRight {
float: right;
}
p {
text-align: center;
}
So I have html layout as this one:
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" />
<div class="summary">Short summary</div>
How to display it as:
<img src="image.jpg" /> <h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with floats however it displayed as:
<h1>Title</h1>
<img src="image.jpg" /> <div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with positions (relative and absolute) and I got what I wanted, unfortunately it doesn't work very well in IE and if the short summary text is very short then image hides behind the other elements. I don't know image height (dynamic height), so height: xxx px; doesn't fit here.
Any help would be great.
EDIT:
I can't div wrap all (right side) elements in this case.
To get it done without adding additional divs to your code, add the below CSS
img{float:left}
div{display:table-row}
DEMO 2
Use position:absolute
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" width="40" />
<div class="summary">Short summary</div>
CSS
img{float:left; top:0; position:absolute; left:0}
div, h1{display:block; margin-left:40px /*Add image width value as margin-left*/ }
DEMO 3
<img src="image.jpg" class="left-image" />
<div class="right-col">
<h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
</div>
CSS
.left-image {
float: left;
}
.right-col {
margin-left: <width-of-image> px;
}
how about this: http://jsfiddle.net/xpq2m/
CSS
body {
padding-left: 100px;
}
img#s {
position: absolute;
top: 0;
left: 0;
}
All I want is my two divs to stack next to one another. They are located inside a container. Why isn't it working?
This is my CSS:
#housecontainer {
height: 420px;
width: 1000px;
padding-left: 110px;
padding-top: 80px;
}
#houseimage {
float: left;
height: 388px;
width: 516px;
}
#rose {
width:200px;
height:100px;
float:left;
}
Judging by the HTML you posted in your comment, your page structure is:
#devcontainer
#develbox
#housecontainer
#houseimage
p
a
img
#rose
Since #rose is a child of #houseimage, it doesn't follow the same floating as it. Since #houseimage has a width of 516 and so does the image, there's no room left for #rose and it is forced below.
Just put one more </div> before <div id="rose">, so that it's inside #housecontainer and next to #houseimage, like you want. Then add the two other </div> you're missing.
You have several structure errors.
Try structuring your HTML like this:
http://jsfiddle.net/bGyV4/
This is the HTML you posted in your comment:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
<div id="rose">
<div id="rose">THIS ISNT WORKING!!!</div>
</div>
</p>
</div>
</div>
There are a number of issues with this:
The id of an element must be unique. It is used to identify the element. In your markup there are two div elements with id="rose".
From your question, it seems as if you want #houseimage and #rose to be side-by-side. This is not happening because #rose is inside #houseimage. That is, it is a child of #houseimage. You need to move it outside the div so that #rose is a sibling of #houseimage.
Change your HTML to be like this:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">
<div id="roseChild">THIS ISNT WORKING!!!</div>
</div>
</div>
jsFiddle Demo
your html error,some DIV tag not closed,try this:
<div id="devcontainer">
<div id="develbox">
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">THIS ISNT WORKING!!!</div></div>
</div>
</div>
</div>