I'm teaching <div> and i have problem. Div is under image, but I want next to. I tried with setting float, position but nothing help.
Jsfiddle (here divs/images are unconnected!)
How to change it to connect images and form on up?
Divs automatically create a line break, because they are block elements. Try using display: inline-block on the div.
I updated your fiddle now: http://jsfiddle.net/aqqUV/3/
Note the code change here:
<div class="form" style="
margin-left: 70px;
color: white;
display: inline-block;
">
Just give first image a width and
display:inline-block;
float: left;
and then give these proerties to div following image
display:inline:block;
float:left;
you could try giving the first div a width and let it float left.
the folowing div elements should float next to it, but don't forget to clear:both at the end!
Related
In this fiddle I have a load of divs, an input and some images that are displayed inline. I want to shift the images down a bit so it looks nicely aligned, but when I apply padding or margin, it simply pushes down every element inside the container.
<div class="rs-paging">
<div class="rs-pageclick">
<img class="rs-selectfirst" src="http://findicons.com/files/icons/2296/fidelity/32/arrow_left.png" alt="" title="First Page">
</div>
.rs-pageclick img {
cursor:pointer;
display: inline-block;
margin-top: 15px;
}
http://jsfiddle.net/paull3876/qds8pnfx/2/
I've tried display:table/table-cell, no difference. I started without the images in container divs and that was just the same. vertical-align:top doesn't seem to help. And it ssems the same with padding or margin.
I don't really want to resort to position absolute/relative as I think there should be a way with simply setting padding. This is driving me nuts !
thanks
The elements are all set to display: inline-block;. When you give one of the elements a margin-top, you push the whole line down.
Are you trying to get the items to align vertically? If so, you could use vertical-align: middle; on the inline-block elements.
http://jsfiddle.net/nea4w6h3/1/
Using overflow:hidden and fixing height for divs seem to work and fit your requests (I added a div containing all the text ones) :
https://jsfiddle.net/qds8pnfx/5/
I have two divs set up with
display: inline-block.
I don't know why but the second div always slides a little bit down in comparision to the first
div
just like it would have a margin-top set up. How to make the second div fully inline with the first div and how to position the
<ul>
vertically and horizontally in the center of the second div ?
Here is Codepen : http://codepen.io/anon/pen/EJhBK
The borders are not intended in the final project. I've placed them to visually show the position of each divs.
Thanks !
#nav {
width: 446px;
display: inline-block;
border: 1px solid green;
vertical-align:top
}
add the alignment this should do the trick.
remove display: inline-block; and use float:left
I have a container which has left and right padding. Inside this container are two divs which should be side by side with a space between. Now because this space is fix but the site is responsive, the two text-divs must have a dynamic width. This is the reason why I can't use %-width.
I thought with text-align: justify it will work, but it doesn't.
Here is the JSFiddle: http://jsfiddle.net/qGw48/
Here the JSFiddle how it should look like: http://jsfiddle.net/4ekSm/ (it only works because of the %-widths)
just change:
div#container > div {
display: inline-block;
}
to:
div#container > div {
display: table-cell;
}
UPDATED FIDDLE
This can be done fairly easily if you make the width value take into account the padding. So I'm using the style:
box-sizing: border-box;
http://jsfiddle.net/qGw48/1/
This means that when you set a width then the padding will be included in that value.
Have you seen this http://jsfiddle.net/cUCvY/1/
I think It solves what your looking for
Two Divs next to each other, that then stack with responsive change
you could add some margin to one of the boxes ie
.left{
margin-right: 5px;
}
This problem is probably quite easy to solve but I'm not sure what I do wrong.
I have the following code:
HTML:
<div class='absolute'>
<div class='container'>
<span>blabla</span>
unknown number of spans..
</div>
</div>
CSS:
.absolute{
position: absolute;
bottom: 0px;
right: 0px;
}
.container{
float: right;
}
span{
display:block;
float: left;
}
Basically what I want is to have all the spans in one straight line at the bottom right. The absolute div works perfectly and container div float right exactly like I want. The problem is that the spans refuse to line up in one row. I get the following look:
The red is absolute div, the blue the container div and the green the spans. Well you see my problem..
I have tried to give the container div a width. This result in a straight horizontal line, like the one I want, except that the spans float to the left as far as the width of the blue container div. And I can't calculate the width because I don't know the number of spans.
So how do I solve this without changing any order and without setting a width to the container div? Or rather, why does the container div shrink at all and not just stay as wide as the floats wants it to be?
Thanks for any answer!
change display:block to display:inline-block?
Change you span to:
display: inline-block;
should make them go next to each other.
This isn't supported in IE7 or earlier though, if that's important to you, you can do this:
display: inline-block; *display: inline;
Oh and remove the float left on the span.
I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.