I have 3 divs in a container div. The first is floated left, the second is floated right and the last sits in the center. This creates 3 approximately even divs across a container div.
In each of these divs I am placing an image of varying heights. Then there is a separate div to sit below the container div which will be the full width (call it description div).
I want the container div to stretch to height of largest image div so that the description div sits nicely underneath the images. Currently this works when the left floated and middle divs contain the largest image but not for the right floated div. I cannot see why or what i'm missing any help would be much appreciated.
NOTE: I'm trying to do this without using any absolute values, just percentages. So I don't want to declare an absolute height to the container div! Also clear's will not work as this is simplified and there are actually a lot of other div containers around all of this etc, unless you can clear just the floats in the above nested div.
Here's the code:
<html>
<head>
<style>
#b_pics {
border: 2px solid grey;
width: 100%;
}
#b_pic1 {
border: 0px solid grey;
float:left;
width:33%;
}
#b_pic2 {
border: 0px solid grey;
margin: 0px auto;
width: 33%
}
#b_pic3 {
border: 0px solid grey;
float:right;
width:33%;
}
#b_website {
border: 1px solid grey;
width:100%;
}
</style>
</head>
<body>
<div id='b_pics'>
<div id='b_pic1'>
Image 1 here
</div>
<div id='b_pic3'>
Image 3 here
</div>
<div id='b_pic2'>
Image 2 here
</div>
</div>
<div id='b_website'>
Line of text goes here
</div>
</body>
Thanks in advance for any help, trying to keep any hair thats left in my head!
A containing element won't stretch to accommodate floating divs. In your example, the the containing div has no actual content and will thus be 0 pixels high. Try changing the border or background colour to illustrate this.
You can force an element to be below any floating divs by giving it the style:
clear: both;
You can also clear just left or right floating divs.
You can add an empty div after your three picture divs that has that style, to make the b_pics container stretch to accommodate the floating elements, or you could just make the b_website div clear both.
I totally agree with SpoonMeiser answer. I had the same problem (only with IE do) and adding a clear: both (div in my case) is the only solution that seems to work.
SpoonMeiser's explanation is correct. Here is some code that should work for you. Essentially, I've added an empty div with "clear:both" at the end of your container div. This forces the container to take up the space of the floating divs it contains.
This is better than making the #b_website div "clear:both" (SpoonMeiser's alternative suggestion) because that would make the #b_website div display in the correct place but would not force the #b_pics border to surround the floating divs.
<div id='b_pics'>
<div id='b_pic1'>
Image 1 here</div>
<div id='b_pic3'>
Image 3 here
</div>
<div id='b_pic2'>
Image 2 here
</div>
<div style="clear:both;"></div>
</div>
<div id='b_website'>
Line of text goes here
</div>
I hope that helps?
Give this a shot. Nothing's hard-coded, and it should do what you want.
Related
There are many questions on this topic already posted so sorry for posting another. However, none of the others that refer to my situation -- vertically aligning a row of images of undefined height, rather than a single image -- have received a reply that accomplishes what I need to do. As far as I can tell, Kizu's first solution here: How to vertically align an image inside div should be the thing, but alas I can't get it to work.
So, I have a container div. I can specify a height for this div if necessary. I can also place this div in another div if necessary.
Inside the div, I want to place a row of images of varying heights. These images should be vertically centered in relation to each other (not just in relation to the container div).
I cannot use background images in this case (the images are being placed within a text widget for easy replacement purposes).
As far as I can tell, I also cannot use display: table on the container div and display: table cell on my images, because the table cell must have a defined height, and my images are of varying heights.
Here is my code -- I've got a couple of extra divs (#footer-single-widget and .footer-single) to achieve the overall centering and padding I want, so I'm including these as well in case one of them is affecting the subsequent divs:
<div id="footer-single-widget">
<div class="footer-single">
<div class="textwidget">
<div class="media">
<img src="#image-1" width="103" height="36" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />
<img src="#image-1" width="103" height="26" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />
</div><!-- end of .textwidget -->
</div><!-- end of .media -->
</div><!-- end of .footer-single -->
</div><!-- end of #footer-single-widget -->
And the CSS:
#footer-single-widget {
width: 100%;
}
.footer-single {
text-align: center;
max-width: 980px;
margin: 0 auto;
}
#footer-single-widget .textwidget {
display: block;
height: 40px;
width: 980px;
}
.media {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.media img.alignleft {
display: inline-block;
vertical-align: middle;
max-height: 40px;
max-width: 200px;
}
The frustrating thing is at some point I achieved exactly this effect -- then decided I didn't need it (all my images at that point were the same height) and deleted the code I had written. Now I need it again and don't have the faintest memory of what I did! But I know it's possible... somehow. Thanks for your advice.
I'm new to webdesign, and i have a particular example, ok i got stuck here:
You have 3 images combining the logo, and when you go hover the middle image, side ones spreed for like 50px on each side. I've achieved the goal to move image on right side with padding but when i try to do the same for left side, my image start to jump left and back to original place.
If some1 has better suggestion i love to study it.
This is an example of what I wish to achieve.
I came up with this code:
#logo_levo{
position: absolute;
float: right;
width: 111px;
height: 111px;
-moz-transition:all 0.3s linear;
}
#logo_levo:hover{
padding-right: 100px;
}
html:
<img id="logo_levo" src="data/images/Class_B_obroc1_logo.png"/>
okay here's something you can work on. css rules on fiddle..check the fiddle
fiddle here
<div id='logo'>
<div id='a'></div><!--left image-->
<div id='b'></div><!--middle image-->
<div id='c'></div><!--right image-->
</div>
Please see this fiddle
My main concern in this fiddle is the div#text and img.frame. I'm trying to create a responsive website, but this has been my problem for so long, I can't figure out how 'to make the img behave beside the text and be responsive at the same time when I try to reduce the size of the browser window. What it does is, it goes under the text before it acts responsively. Is there a workaround for this?
<div id="text">This is some text this is some text this is some text</div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
For your goal you should use em or % and use inline-block.
jsfiddle.net/geNuR/ Look at this jsfiddle
Don't know why i can't put code propely, maybe forum blocked our country))
The key to responsive images with flowed text does rely on float. However, the key is in floating the img element, not the text.
First, place the img tag before the text, giving a markup as so:
<img src="image.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
The importance of this order is that the img will be floated to the right, removing its cleared blocked region height, and the text will flow up and around it.
Next, remove the float from the text, allowing it to flow, and apply a float right to the image. I will also note, that to give a margin between the text and the img, the margin is applied to the img, giving you this styling:
img { max-width: 100%; height: auto; }
#text{ width:100px;}
.frame {
float:right;
background: #fff;
padding: 6px;
margin-left:10px;
box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}
Here is a jfiddle demonstration
I'm assuming that you're looking to have text and an image side-by-side here, so apologies if I'm wrong.
Like M. Berro, I would first put the two elements inside a containing div, as below:
<div id="container">
<p class="text">Here's some text. This will be aligned to the left, and next to the image. It's width will change as the viewport expands or contracts.</p>
<img src="/image.png" title="An image, aligned right" />
</div>
To sit the image and text side-by side, I would use the following CSS as a starting point:
#container {}
#container p.text { float: left; min-width: 320px; }
#container img { float: right; margin-left: 20px; }
In my example, I've applied a float to each of the two elements (You will of course have to clear the floats to make sure the rest of the page's structure remains intact - I suggest looking at Clearfix, as it avoids any extra empty divs). I've also given the text a min-width: this ensures that the text doesn't contract to a point where it is unreadable!
As I understand you need an image beside a text, so when you reduce the window size the image and text behavior isn't affected.
You need the following:
Make a container div id=img_container give style width (let's say 400px)
Put your image inside the container and give a style #img_container img{float: left}
Put your text inside a p tag and give style #img_container (p or div) and give style (margin-left: same of your img width) + 10
This is the full example:
<style>
#img_container {
width: 400px;
}
#img_container.text {
margin-left: 306px;
}
#img_container img.frame {
float: left;
}
</style>
<div id="img_container">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
</div>
You could start by adding the css max-width: 60%; in .frame. It's not perfect but is this similar to what you are trying to achieve? Better results can be realized with javascript/jQuery.
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
there's a container with background-color and padding specified. there's an image inside it. in a full screen browser window it looks like as it should look like:
http://img263.imageshack.us/img263/4792/61536769.png
but after resizing the window (window width is less than the content width) and the horizontal scrollbar appears, if i scroll it right, i can see the background ends where the window ends:
http://img845.imageshack.us/img845/7370/11506448.png
here's the code:
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background: pink; padding: 32px; display: block;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>
in ie8 it looks right, the padding is treated as it's part of the content. in firefox and in opera it isn't, even if i use the "-moz-box-sizing: border-box;" (and correct doctype and everything...) so i don't really know what should i do. i usually did it with margin for the image but this time that can't be a solution (the actual thing is different than this example, but it shows the exact problem).
thanks for your help in advance :)
Add an extra div that wraps your existing div and do float:left.
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background-color: pink; width:100%;float:left;">
<div style="background: pink; padding: 32px; float:left;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</div>
</body>
Edit: Removing display: block; as that's irrelevant when you have float.
What's going on is that the div isn't expanding to wrap around the image, since the image has a fixed width, but the div doesn't (and is therefore defaulting to 100% of the parent, which is body/html at 100% of the viewport). If you look at it with Firebug, you can see that the image is going outside of the bounds of the div and its padding.
I've tweaked the CSS in this jsFiddle to get the background to expand to the image. It should at least get you started. Basically, what I did was add overflow-y: auto; to the div, which expanded the background.
One thing you can do in this case is to put a specific width on the div as well:
<body style="margin: 0; padding: 0;">
<div style="background: pink; padding: 32px; display: block; width: 640px;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>
You can do that in this case because you already know the width of the contents. Of course, if you need a dynamically sized div this might not work for you.
I was going to suggest putting margin: 32px on the image instead of padding: 32px on the div, but when I tried it that didn't help either. Bizzare.