I have <div> element with background image from sprite. On left and right of that <div> I have <input> buttons (prev, next).
The thing is that <div> with background doesn't seem to have any width, so it is squeezed between (and covered with) the two buttons.
The question is: how do I preserve the width of the <div> element?
The example is here: http://jsfiddle.net/meridius/4Dk2n/
EDIT:
I won't mind restructuring the elements!
Try setting the min-width property of the <div>.
.sprites-sachy {
min-width: 100px;
}
min-width:100px
or
padding-right:50px
or
or put a into the div element (so it's not empty) and add a width:100px;
OK, so I added one <div> wrap for buttons and figure and alter the css and here is the working result.
http://jsfiddle.net/meridius/4Dk2n/2/
Related
Hello i used Bootstrap and my 2 div col-md-6 and col-md-6 are not in align in height.
Use this css for the first div.
div.col-md-6 {
display: inline-block;
vertical-align:middle;
}
The simplest way to align vertical align here is to add padding from top in the first div.Your second div have buttons and must be having padding also.
Use min-height for both using class to div. It will solve your query.
eg:
<div class="col-md-6 mycol">
</div>
<div class="col-md-6 mycol">
</div>
style.css
.mycol{
min-height:100px;
}
Without the code, it's hard to find the cause, but I guess your two div are without a css height property and then adapt to their content.
The div on the right contains items that seems to have a padding on top and bottom, resulting in an item with a greatest height than the one on the left.
Your two div are aligned on the top and as it's already been mentionned you need to add the same padding on the left and right cols (I don't like the vertical align answer, as it work in this case, but could cause issues as the cols height could change).
If you dont have a scenario where you text will wrap to the next line, you can use line-height which will be same for both the sections.
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 8 years ago.
EDIT:
Yes, this is a duplicate, my mistake (I am new to CSS). But can anybody explain the rationale behind aligning the image, as opposed to the link / text? Is there some larger concept at work here that would help me understand the concepts of CSS better and avoid problems like this in the future?
Original (Duplicate) Part:
I have a scenario where I want to have a link next to an image on my page, and the link should be aligned so that it is vertically centered with the image. Of course I don't know the exact height of the image, so this should be done dynamically.
Given this chunk of HTML, how would I achieve such a thing with CSS?
<div class="myDiv">
<img src="myImage"/>
My Link!
</div>
I have a fiddle at this location, and you will note that I have placed some size information in the image class. This is just to simulate an image of unknown size, so please consider the question without it.
4.8. Vertical alignment: the 'vertical-align' shorthand baseline alignment property
Applies to: inline-level and 'table-cell' elements
This property affects the vertical positioning of the inline boxes generated by an inline-level element inside a line box. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.
While the elements a and img are both inline by default, the property vertical-align:middle should be used on the img element instead.
jsFiddle example
.myDiv img {
vertical-align: middle;
}
try this:
.myDiv img{
vertical-align:middle;
}
DEMO
Add vertical-align:middle; to the image instead of link.
Updated fiddle here.
just use vertical-align: middle;
.myDiv img {
vertical-align: middle;
}
First: please see this fiddle: http://jsfiddle.net/gamehelp16/77ssr/
So, these images:
(source: placekitten.com)
Uses the float:right property
and this image:
(source: placekitten.com)
uses the float:left; property
And if you see at the fiddle the third image (with the float:left ones) is not located beside the second image (the big ones)
My question is: how to make the third image is on the right side of the second image. I need pure CSS solution
Thanks
Update:
i've figured out an alternative way to do it. it's by setting the second image's float to left :D
You could float the big one and have the little ones set to block display. View on JSFiddle.
html
<img src="http://placekitten.com/200" id="left">
<img src="http://placekitten.com/100">
<img src="http://placekitten.com/100">
css
img:not(#left) {
display: block;
}
#left {
float: left;
}
To move them as a unit, you could set them in a parent container element like this.
The float element of css is relative to the page not the actual elements, i'll recomend you make 2 divs, and inside these divs the imgs to position, or you can simple use top or left elements. The choise is yours.
Background
I have the following html code:
<div id="parent">
<div id="child">
I'm the child!
</div>
</div>
I want the parent div to be positioned relative to the bottom of the page as with the css properties position: absolute, bottom: 0px.
This works fine if the child div(s) have no padding or border. However, as showcased in this JSFiddle example, if the child has padding or a border, it expands beyond the bottom of the parent div (notice the rendered page is scrollable and there is additional content from the child div below the bottom of the page).
Question
What's the best way to make sure the parent div fully encompasses the child div vertically? (Correct me if I'm wrong, but this doesn't appear to be a problem with horizontal padding/borders)
My best idea was to add the sum of the padding/border/margin of to the padding to the parent div. Using something like SASS to generate the actual css makes this slightly more palatable, but still seems like a really unclean solution. Is there a better way?
Thanks!
(As a side note, when I made the JSFiddle example I noticed the right border was missing on the child div. Is this just a fluke with JSFiddle or something?)
If you get rid of those display: inline;s it will work like a charm.
How can I achieve the following layout? Specifically the positioning of Image and DIV
I've found that unless I set a specific width for the Div, it will just go on to the next line and take up the full width of the container. Additionally aligning it relative to the bottom of the image is giving me trouble. Currently they're both float:left
Edit: The two solutions so far work if the image is a constant width which I guess I could work with, but it's going in a Wordpress theme for an author's profile page and it's possible that images would have slightly variable widths. Is there a solution that would have the Div right next to the image (minus padding) regardless of how wide or narrow the image is? Basically having the div adjust its width to accommodate the image width.
Tested in IE7/8, Firefox, Chrome.
Live Demo #2
CSS:
#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}
JS/jQuery:
$('#header').css('margin-left', $('#top img').width() + 10);
(you might want to change the + 10 for parseInt($('#top img').css('margin-right'), 10))
HTML:
<div id="container">
<div id="top">
<img src="" />
<div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
</div>
<div id="content">dfgdfg</div>
</div>
I'd put the header image and header div inside its own container and position the items within it using absolute positioning.
I've put together a quick sample here: http://jsfiddle.net/JjxYj/1/
Notice here that if you remove the width of the Div in the header, it will become the width of its content.
Update
To answer the updated part of the question, here's another solution that'll allow the image to be of any width whilst still positioning the header text at the bottom of its containing item: http://jsfiddle.net/JjxYj/5/