Consider the following site.
I am trying to position a div that is approx 300px wide by about 400px high next to the picture of the woman. I have tried to display the div as inline but to no avail. I tried to float left but once again no luck. Any thoughts?
You can position it next to the image, by using the following CSS:
.emailForm {
width: 260px; /* anything above 260px will fall over to the next line */
/*float: right;*/ /* remove float */
display: inline-block; /* inline-block since you want specific width and height */
height: 434px;
border: 1px solid black;
}
NOTE: Pretty sure you are using it, but in case you aren't, do use Firebug or Chrome dev tools for making such tasks a breeze.
Try this,
<div id="wrap">
<div id="nextTo"></div>
<img id="woman" src="#" width="600px" height="400px" />
</div>
CSS
#wrap {width: 1000px; margin: 0 auto;}
#nextTo {float: right; max-height: 400px;}
This will ensure that your image is fixed width. If you have a wrapper div that is 1000px wide for example, the #nextTo div will be the remainder of what the image takes up (in my example 400px).
Adding the max-height attribute to the #nextTo div ensures that the div will not fall below the image, but not sure if this is what you are after.
Related
How can I style a div with CSS to automatically fit in a gap? At the moment, I have something like this
HTML
<div id="wrapper">
<div id="auto-width"></div>
<div id="changing-width"></div>
</div>
CSS
#wrapper {
padding: 30px;
}
#wrapper * {
height: 50px;
display: inline-block;
}
#auto-width {
width: 271px; /*I don't want to have to set this value*/
}
#changing-width {
width: 140px;
float: right;
margin-left: 30px;
}
I want the div with the ID "auto-width" to change it's width based on the padding of the wrapper, and the width and margin of the "changing-width" div. I don't mind using the padding and margin values, but in my actual project, the width of the "changing-width" div actually changes depending on the amount text in it and I want to "auto-width" div to change with it.
JSFiddle example:
https://jsfiddle.net/bve8162f/
If the width of the right div is fixed, then you could set the width of the left div like so:
#auto-width {
width: calc(100% - 200px);
}
...where the 200px is the width of your right div plus the padding. If you're using a css preprocessor like Less or Sass, you could create a variable so you can define the value in one place for both styles.
Note that the 100% refers to the explicit width of the parent. This solution seemed to work in your fiddle (updated version here,) but if your production code is set up a little differently, this may not work. I'll see if I can stumble across a different way, but this is one method I personally like to use when I can.
I have an image placed within a relative width div as part of a responsive page design. The div's width (and hence the image's size) is set to ensure that content beneath it appears above the fold on screens down to a certain resolution.
A minority of images that appear here have different dimensions (e.g. 4x5 format vs. 4x6). These taller images push the content beneath it below the fold.
I want to maintain the div's height for the 4x6 dimension, which represents the majority of images, such that when an alt format image appears here, the top and bottom of the image are evenly clipped.
I've tried a couple different approaches, none with the desired effect. Applying a max-height on the image element slightly distorts taller images. I tried max-height on the wrapper div with overflow:hidden, but that doesn't constrain the image element.
I applied max-height to that mainImage div, too, and this almost works. However, as you can see from the CSS, I'm using background-color and padding to create a border around the image. Setting max-height on the main div forces the bottom border of the image element outside of the main div. I also tried applying the border to mainImage, but the bottom border still does not appear. Lastly, with max-height applied to the div and not the image, the image is not centered vertically within the div.
I'm not sure how to accomplish what I'm after, or whether it's possible in a responsive design (i.e. without a fixed height). Any thoughts?
Here's the HTML:
<wrapper>
<header></header>
<content>
<!--the main image -->
<section>
<div id="mainImage" role="main">
<div class="in mainImageWrapper">
<img src="[IMAGEFILE]" />
</div><!--end mainImageWrapper -->
</div><!--end mainImage-->
</section>
<!-- more content -->
</content>
</wrapper>
And here's the CSS:
#wrapper {
width: 100%;
min-height:100%;
height: auto !important;
height:100%;
border: none;
}
#content {
margin: 0 auto;
width: 90%;
max-width: 980px;
}
#mainImage {
margin: 1% auto 3% auto;
width: 100%;
overflow: hidden;
}
.mainImageWrapper {
width: 100%;
max-height: 634px; /* The aforementioned fix that doesn't provide the desired effect */
overflow:hidden;
margin: 0 auto;
padding: 0;
display: table-cell;
text-align: center;
position: relative;
}
#mainImage img {
width: 97%;
padding: 1.5%;
background: #FFFFFF;
margin: auto;
vertical-align: middle;
-moz-box-shadow: 1px 2px 8px #1A1A1A;
-webkit-box-shadow: 1px 2px 8px #1A1A1A;
box-shadow: 1px 2px 8px #1A1A1A;
}
So, it appears that what I want to accomplish above isn't possible through css. I wound up implementing phpThumb and using the z-crop parameter to crop images that exceed a certain height from the center. Works well for most instances. Only issue I've encountered with this approach is that, since this is a photography website that includes watermarked images, occasionally the crop cuts off the watermark in an awkward way.
Yes. This has been asked a billion times. But nobody has given an answer that works for me.
It's so stupid. I have a SPLASH PAGE.. which has almost NO code on it. All it has is some js and a series of photos that fade in, one by one.
No matter what i do, it aligns top left of the screen. Here's the code.
<div style="height:100%; width=100%; margin: 0px auto;" id="these">
<img src="photos/splash/Y.png" height="250px" style="padding: 20px;">
<img src="photos/splash/I.png" height="250px" style="padding: 20px;">
<img src="photos/splash/K.png" height="250px" style="padding: 20px;">
<img src="photos/splash/M.png" height="250px" style="padding: 20px;">
<img src="photos/splash/U.png" height="250px" style="padding: 20px;">
<img src="photos/splash/N.png" height="250px" style="padding: 20px;">
</div>
I want it to align in the very center of any screen, regardless of resolution. ID="these" is related to the javascript that displays them and not to any css-level styles or positioning.
Ridiculously simple right?? Yeah. It's always showing up on the top left.
I don't feel it's necessary to post the js (also it's breaking my post) but if you want it, ask. It works fine. I'm a backend coder who HATES (as in detests) HTML/CSS. So you'll have to really walk me through it and not just make vague suggestions.
I even tried a table! With a valign center. That centered it but each image showed up in the center and then was pushed left as the next image faded in. Obviously not what i want.
What i want is for each image to show up, one after the other, in it's own position. But will work for any screen resolution.
I'm losing my mind.
Thanks.
Your example shows you centering inline elements within a block level element. So all you need to do is this:
these { text-align:center; }
Ex: http://jsfiddle.net/87zqf/
If you want to center the div within its parent, that div must have some width less than 100%. For example:
div#these {
width: 350px;
margin: 0px auto;
border: solid red 1px;
}
For example: http://jsfiddle.net/nRKYV/
100% height on a div will not work, which is one of the shortcomings of CSS (in my opinion).
In the end, it can only be done if you know the height of your <div>. What you want to do then is to position it absolutely, 50% off the top and left of your screen and with a margin of half its height/width.
Check out the following JSFiddle for an idea of how it can be done:
http://jsfiddle.net/Lsh6j/1/
Note that you could also use percentages for the height and width on the surrounding <div>, but for the percentage-based height to work, the <div>'s parent element's height must be set/known.
Using this tutorial as a guideline. First add a centered class with this css.
.centered {
position: fixed;
top: 50%;
left: 50%;
}
Add this class to your div:
<div class="centered" id="these">
...images....
</div>
The problem is this centers the top left of the div. So you need to subtract off half of the width from the margin-left and half of the height from the margin-top.
Add this javascript (uses jQuery, let me know if thats a problem) to do the adjustment
<script>
function adjust() {
var height = $("#these").height();
var width = $("#these").width();
$("#these").css("margin-top", "-" + height/2 + "px");
$("#these").css("margin-left", "-" + width/2 + "px");
}
$(window).on("resize", adjust);
adjust();
This sets the margins appropriately on a resize, as well as calls the adjust method on the initial load.
The simplest solution (fiddle):
html, body {
height: 100%; /* necessary to make the window height be 100% */
margin: 0;
}
body {
display: table;
width: 100%;
}
#these {
display: table-cell;
vertical-align: middle; /* for table cells, it aligns their content */
text-align: center;
}
Another option (fiddle):
html, body {
height: 100%; /* necessary to make the window height be 100% */
margin: 0;
}
#these {
text-align: center; /* images are text content */
white-space: nowrap;
}
#these:after {
content: '';
display: inline-block; /* adding invisible inline placeholder after images */
height: 100%; /* make it 100% tall */
vertical-align: middle; /* and align the whole line to its vertical center */
}
img {
vertical-align: middle; /* align vertical centers of images to the middle of the line */
}
Unless you have some other css that'll mess this up, just add
#these {
text-align: center;
}
to the div wrapper and toggle visibility on/off to keep them in place: http://jsfiddle.net/63cHS/
I want to wrap an image into an html DIV and, since I want this to be fully scalable with the size of the window, I want to set the width of the DIV in percentage as follows:
html
<div id="wrapper">
<img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>
css
#wrapper {
position: absolute;
width: 50%;
}
#wrapper img {
width: 100%;
}
The image should determine the height of its container. This is because the image width is set to 100% and the image height is calculated accordingly maintaining the correct aspect ratio.
The result is visible on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/
My questions are:
Why do all modern browsers render the wrapper DIV 5px taller than the inner image?
How can I get rid of this 5px gap, while still setting all the sizes in percentage and without using javascript?
Surprisingly, this happens in Chrome (21.0.1180.89), Firefox (15.0.1) and IE8, while IE7 renders it correctly, matching the height of the DIV with the height of the image.
Check this out :
http://jsfiddle.net/5BN4g/29/
It's a line-height issue :-)
You need :
#wrapper {
width: 60%;
background-color: #aaa;
margin: 50px auto;
line-height:0;
}
#wrapper img {
width:100%;
border: 1px dashed red;
box-sizing:border-box;
}
I used box-sizing to make sure the width of the image doesn't overflow the container
................
Hi now add vertical-align:top in your img tag throw css
as like this
#wrapper img {
width: 100%;
border: 1px dashed red;
vertical-align:top; // add this line
}
live demo
OK, fiddling about, I found a good possible solution:
#wrapper img {
display: block;
width: 100%;
border: 1px dashed red;
}
Changing from the default inline display to a block display eliminates the line-height problem straight away.
This approach is also semantically correct because in this case what we really want is a single image wrapped in a DIV without any other elements in it, so the concept of line-height needs to be completely wiped off by displaying the image as a block.
It works on all major browsers: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/
I think you shuold set align property to force browser show correctly img tag.
<div id="wrapper">
<img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>
DEMO
I think is because it doesn't see as a Table
i added the display:table in your code
And it looks fine now, check the link
Example Display Table
Your issue is that an image -- the <img> tag, to be exact -- is an inline element. All you need to do is set display: block on the image and the extra padding goes away. Demo.
I'm trying to build a quick overview that shows the upcoming calendar week. I want it arranged horizontally so it can turn out to be quite wide if we show a full calendar week.
I've got it set up right now with an inner div with a fixed width (so that the floated "day" divs don't return below) and an outer div that's set to width: 100%. I'd LIKE for the outer div to scroll horizontally if the page is resized so that the inner div no longer fits in it, but instead the outer div is fixed larger at the width of the inner div and the page itself scrolls.
Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..
The CSS:
.cal_scroller {
padding: 0;
overflow: auto;
width: 100%;
}
.cal_container {
width: 935px;
}
.day {
border: 1px solid #999;
width: 175px;
height: 200px;
margin: 10px;
float: left;
}
and the (simplified) structure:
<div class="cal_scroller">
<div class="cal_container">
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
</div>
</div>
So to try again - I'd like the cal_scroller div always be the page width, but if the browser is resized so that the cal_container doesn't fit anymore I want it to scroll WITHIN the container. I can make it all work if I set a fixed width on cal_scroller but that's obviously not the behavior I'm going for. I'd rather not use any javascript cheats to adjust the width of the div if I don't have to.
Your cal_scroller class is 100% + 20px (padding) wide. Use a margin on cal_container instead, like so:
.cal_scroller {
padding: 10px 0;
overflow: auto;
width: 100%;
}
.cal_container {
margin: 0 10px;
width: 935px;
}
See here for a description of how the box model works (in short, the everything is outside the width/height of an element).
Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.
One problem I see is your width: 100% rule. div.cal_scroller is already a block-level element, so it'll default to filling the entire page width. (Not to mention that padding is added on top of width, so you end up with that div being bigger than the page.)
Just get rid of that width rule, and you should be golden. (I just tried myself, and it worked like a charm.)
I didn't read your question very carefully, but when you have width: 100% and padding, that's generally not what you want.
100% + 20px > 100% - that might be the problem.
I struggled with this a lot but the simplest solution I found was adding:
.cal_container { white-space: nowrap; }
This way you don't have to give it a width at al. It just makes sure everything stays in one line.