This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 8 years ago.
I have the following code:
<h1>4 Channel DVR - High Res 960H WD1, (500GB HDD)</h1>
<div class="col-50 product-wrapper left">
<img class="product-image" src="http://176.67.174.179/ukcctvinstallations.co.uk/wp-content/uploads/2014/09/4-channel-dvr.jpg" alt="4-channel-dvr" width="522" height="283" class="alignnone size-full wp-image-398" />
</div>
<div class="col-50-end left"
Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here
</div>
<div class="clear"></div>
CSS:
.col-50 {
width: 49%;
margin-right: 2%;
}
.col-50-end {
width: 49%;
}
.product-wrapper {
/*empty*/
}
.product-image {
/*empty*/
}
What I am wanting to do is vertically align the image in the middle of the col-50 div. The descriptions will all be different lengths so the height will change each time and so the alignment would have to be centered vertically according.
Is there a cross-browser way I can achieve this?
To display the columns side by side and center the image, you can use display: table-row on a container and display: table-cell on each column. Then you can change the widths to 50%and remove the 2% margin. Then to center the image, use vertical-align: middle on the containing column. Also, add width:100%; height:auto; to the image to make it fit the column.
DEMO
Related
I have the following content as the first content
#content {
border-radius: 5px;
background:#FFFFFF;
text-align:left;
padding:20px 20px 5px;
margin:15px 0 15px 0;
}
inside them I have two divs that both float to left as below:
<div id="content">
<div class="my_left_menu">
//this floats left
</div>
<div class="my_right_content">
//this also floats left
</div>
</div>
Now in the right content I want to have a gallery of products like shown in on line shopping website. So I created another div class that floats left and placed all the images inside it, but every image is coming vertically. But I want it to be something gallery view or grid like view. How can I do it ? any idea please?
If I understood you right you want to show a grid-like list of products on your right side div that is div.my_right_content but they are shown vertically.
Basically what you need to do is to tell the inner div tags which are your products not to take all the width available. A simple way is to give them a fixed width and if the browser is resized or your page is being displayed on a smaller screen then they can align vertically to have enough space for your content. Here is what you can do:
<div id="content">
<div class="left-col">
</div>
<div class="right-col">
<div class="product">
... your product info and content
</div>
<div class="product">
... your product info and content
</div>
</div>
</div>
And then give them a style rule like this
.product {
width: 100%;
max-width: 200px;
display: inline-block;
}
So they will align horizontally and when the browser width is not enough to hold two 200px wide products horizontally they will be aligned vertically. This also means that if your .right-col container is 600px in width it will hold three products in each line.
If you want it to be more perfectly aligned you may want to give each product a fixed height too.
Regards,
Shakib
This question already has an answer here:
Two divs; left should be fixed width, right should fill rest of space
(1 answer)
Closed 9 years ago.
I have on my page 2 divs: one (left) with menu and second (right) with content. Right div must have width of 800px and be horizontally centered. I want left div to fill all remaining space.
I tried setting display of the divs as table-cell or setting float to right and left and putting in left div span element with width:100%, but it didn't work.
Is there any way to make the divs look as I want?
Try this:
HTML
<div id="left">
Menu
</div>
<div style="text-align: center;">
<div id="right">
Content
</div>
</div>
CSS
#left {
background-color: green; /*for demonstration purposes*/
float:left;
}
#right{
background-color: blue;
width: 800px;
}
JS
$(document).ready(function(){
var width = $(document).width();
var rightDivWidth = $("#right").width();
var leftDivWidth = width - rightDivWidth;
$("#left").css("width", leftDivWidth);
});
Demonstration
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
For this fiddle, why is there a space at the bottom of div#imageDiv?
JSFiddle
<div>
<div>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" />
</div>
</div>
</div>
<div id="text"><div id="inner">text goes here</div></div>
html {
line-height: 1.5em;
}
#text {
background-color: grey;
margin-top:-7px;
}
Set your image to img { display: block; }. And please next time add your code here on SO to prevent link rot and lets us easily review your code here.
Give your image a bottom vertical alignment and the space goes away.
jsFiddle example
img {
vertical-align:bottom;
}
you could also margin-top property to achieve that
http://jsfiddle.net/meetravi/7Knyx/14/
P.S Its always great to avoid negative values in css if you are planning to support relatively old browsers
I have a site that has a fairly complicated footer, see http://www.roadsafetyforchildren.co.uk/, not really sure how to attempt to build it:
I've split the image up into two parts, the first part below needs to be horizontally centered but sit below the content:
The second part needs to repeat horizontally but stay in line with the image above.
Therefore the two images needs to look like the first image at the top of the question.
I can match the two images up IF the content div above it has a fixed height. The problem is the content div NEEDS to be flexible to grow/shrink with the content. Therefore the image at the bottom of the content div moves up and down the page depending on the size of it.
How can I keep the two images lined up with a flexible content div above it?
P.s There's a lot of answers but don't think a few of them have understood the question.
Seems straight forward to me, you will need two divs:
<div id="content">
<div id="inner_content">
<!-- Append image to very bottom -->
<img src="city" width="" height="" alt="" />
</div>
<!-- Background image of hills goes here -->
</div>
CSS is straight forward..
#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }
try this:
html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}
Whatever <div> the content is in should be height:auto and have a background image of five or so pixels high by whatever width and should repeat-y in the css, and the <div class="footer"> should be float:left. That way the footer will always be below the content, and whatever height the content is will have a repeating background.
No need to mess with PS, except to create the bg image for the content.
This would be the bg image for content div, and repeat-y so it repeats from the top down:
And the footer image:
And if you make the 'background repeat' image a png, you could make the drop shadow opaque to accommodate the change in the body bg image.
You can position a background inside an element:
div#footer {
background: url('roadpic.jpg') bottom center no-repeat;
}
<div id="content">your content goes here</div>
<div id="footer">...</div>
which will keep the footer div below the content at all times.
You will need a common anchor point for both the backgrounds. Between a horizontally-resizable window and a content area that is less than 100% of the window width, the only point that can remain constant between the two containers is the horizontal centre of the body.
So your hills background will need to be centred on the body or some other container that has 100% of window width. The road image can either be fixed-position inside a fixed-width centred container (shown in the example below), or centred inside a centred variable-width container.
The resulting CSS will be something like this:
div#wrapper {
width: 100%;
background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
width: 800px;
margin: 0 auto;
/* background can be offset to the left or right if the width is fixed
if not it must be centred */
background: url(road.png) right bottom no-repeat;
}
And the HTML:
<body>
<div id="wrapper">
<div id="content">
<p>Some content here</p>
</div> <!-- content -->
</div> <!-- wrapper -->
</body>
The backgrounds of both the containers will have same anchor point and they'll move together as the window is resized!
Because #content is a child of #wrapper, they'll remain aligned vertically because #wrapper will get taller as #content gets taller (unless #content is a float, in which case you'll have to use the :after clearing trick; or if #content is position:absolute, you'll need to align them manually or with javascript).
I am trying to get the following effect using css. I am trying to get bottom edges of title and 'right text' to align with logo's bottom edge, and get the title to stretch
vertically. I have included html and css
____________________________________________________________________________________________
|________________________________________________________TOP_TEXT_________________
| |
LOGO | title | right text
|____________________________________________________________________|
__________|______Menu__________________________________________________________|____________
<div id="wrapper">
<div id="logo"><img src="some.gif" width="193" height="77" /> </div>
<div id="top_text">top text</div>
<div id="right_text"> right text </div>
<div id="middle">
<div id="title">title</div>
<div id="menu">menu</div>
</div> <!-- middle -->
</div> <!-- wrapper -->
#wrapper {
width: 100%;
}
#logo {
float: left;
border-right:#FFFFFF thin solid;
}
#top_text {
text-align: right;
width: auto;
}
#right_text {
float: right;
border-left:#FFFFFF thin solid;
}
#middle{
/* may be needs some sort of height */
}
#title {
/* not sure how to put here */
}
#menu {
/* doesn't line up with bottom edge of logo and 'right' */
vertical-align:bottom;
}
In your case I guess vertical align would not be helping you. Rather you need to align your HTML more semantically so that you could use Position:relative,top and left or Margin-top/Margin right handy to align it.
Following Pseudo code Steps might be useful for you to align it.
Step 1: Try Defining logo in a container or float it alone left
Step 2: Trying defining a section comprising of three different
sections top text,title and menu and float the outer parent section as
well left.
Step 3: Try defining a right section and float it right
Step4: Position all the elements using Position:relative,top and left
or Margin-top/Margin right
The above steps would be helping you to get a picture perfect layout rather fiddling around with Vertical-align.
If you need further help on vertical-align here
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Hope this answer helps.
Good luck.. happy coding.