I have a container with a fixed height and content within this container. I've been using "em" for the font sizing, and its been working for modern version of FireFox and IE. However i went and checked it on my mobile and an old version of IE(6) and the content overflows past the bottom of the container into the footer. So far i've tried changing the height of this container to auto !important and setting the fixed height as a min-height, this did not work. Also i changed the em to corresponding px sizes but this did not work either. The HTML and CSS look something like this.
#container {
width:570px;
height:570px;
font-size:1.2em;
text-align:left;
}
#container p {
margin-left:35px;
margin-right:35px;
}
#foot {
width:570px;
height:60px;
clear:both;
}
<div id="container">
<p>Content1</p>
<p>Content2</p>
<p>Content3</p>
</div>
<div id="foot">
</div>
add overflow: hidden; to #container's css and a display: block; also height:auto !important;
#container {
width:570px;
height:auto !important;
display: block;
font-size:1.2em;
text-align:left;
}
Related
I use the following code to display a div (with background color) with full height.
HTML
<div class="container">
<div class="span5 fill">
<div class="test">
here is a lot of text....
</div>
</div>
</div>
CSS
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
* {
padding: 0;
margin: 0;
}
html,body {
height:100%;
}
.container {
height:100%;
}
.fill{
width:50%;
height:100%;
min-height:100%;
background-color:#990000;
color:#efefef;
}
Actually it works but it's not responsive despite percentage heigh properties.
How can I fix this problem? The background should always have the same height as the content - full height...
Here you can see a picture
What I also use sometimes is:
height:100vh;
The vh unit stands for "Viewport height" (there's also vw for Width), and it basically uses your viewport (most of the time your browser window) height size, so this might fit your needs perfectly.
Here you can check the browser support for "vh": http://caniuse.com/#feat=viewport-units
The main element needs to have the background color.
Try adding:
.test {
background-color: #990000;
margin: auto;
}
This below link is a demo which increases the height of the text div as your content height increases
.fill{
width:50%;
height:100%;
min-height:100%;
background-color:#990000;
color:#efefef;
}
https://jsfiddle.net/maxspan/328vxn54/
I want to fit a png image to the height of a div that is inheriting its height from another div. I have seen how this can be done by setting the image's max-height to 100% (in questions such as this: How do I auto-resize an image to fit a div container), but this only works for me when the image is directly in the div thats height is specified in pixels.
I have a topbar, whose height I set explicitly, and a logodiv inside that, which inherits the height from the topbar. However, the logo does not resize to fit the height of logodiv unless I explicitly set the height (the commented code).
It seems like bad coding to have to set the height twice, when it should be inherited. Is there any way to fit the image to the correct height without doing this?
css:
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
html:
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
I want to fit a png image to the height of a div that is inheriting
its height from another div.
Technically, logodiv is not inheriting its height from topbar. Its simply expanding itself according to its content(the image in this case).
Try adding the property height:inherit; to second div and you are good to go.
HTML
<div id="topbar">
<div id="logodiv">
<img src="images/project/logo.png" />
</div>
</div>
CSS
#topbar{
width:100%;
height:45px;
}
#logodiv{
float:left;
height:inherit;
/* height:45px; */
}
#logodiv img{
max-height:100%;
}
Fiddle
Try this css:
#topbar {
width:100%;
height:45px;
border:1px solid red;/* for highlighting*/
}
#logodiv {
float:left;
height:inherit;
}
/*To clear float */
#topbar:after {
clear:both;
display:block;
content:""
}
#logodiv img {
max-height:100%;
}
Demo : http://jsfiddle.net/lotusgodkk/4d4L1g0a/
I'm trying to implement a responsive horizontally scrolled list of images.
For example:
<ul>
<li>
<img src="image1.jpg"/>
</li>
<li>
<img src="image2.jpg"/>
</li>
<li>
<img src="image3.jpg"/>
</li>
</ul>
The images are an unknown width and height ratio.
My Requirements:
I want the images to always be 100% height of the browser window at all times.
I want them to be adjacent to each other (without using float; so inline is probably best).
I don't want to break the width/height ratio of the images on window resize.
No javascript.
So far I've tried with this CSS, but I can't seem to get the images not to squash when the browser window is resized:
ul{
width:100%;
overflow-y:scroll;
white-space: nowrap;
line-height: 0;
font-size: 0;
}
ul li{
display:inline;
height:100%;
}
ul li img{
max-height:100%;
width:auto;
}
Any takers?
Edit:
I've put a simple fiddle together for an example of where I'm at with it.
Any help would be great...
Okay here we go. After much experimentation I've finally found what I believe to be the answer for most browsers. Seems to work on Firefox 3.5+, Safari 4+, Chrome 3+. I've also tested on an iOS device, an Android device, and IE, though not extensively.
*clears throat*
html, body{
width:100%;
height:100%;
}
html, body, ul, li{
padding:0;
margin:0;
border:0;
text-decoration:none;
}
ul{
width:100%;
height:100%; /* CHANGE */
overflow-y:scroll;
white-space: nowrap;
line-height: 0;
font-size: 0;
}
ul li{
display:inline;
height:100%;
}
ul li img{
max-height:100%;
height:100%; /* CHANGE */
width:auto !important; /* CHANGE */
}
The main factors seem to be making sure that the height properties are 100% all the way down to the last node in the list, including the img (on top of it's max-height declaration).
I've also noticed better success in older browsers appending the !important declaration after the width:auto property.
I'm surprised at the lack of hunger for a layout like this, so if this has helped anybody then please let me know.
I see what you mean by the distortion at low widths when using the %. So one solution would be to also implement some fallback absolute widths too, so that at lower resolutions the images don't re-size.
CSS
html, body{
width:100%;
height:100%;
}
html, body, ul, li{
padding:0;
margin:0;
border:0;
text-decoration:none;
}
ul{
min-width:150px
width:100%;
overflow-y:scroll;
white-space: nowrap;
line-height: 0;
font-size: 0;
}
ul li{
display:inline;
height:100%;
}
ul li img{
min-width:150px
max-height:100%;
width:auto;
}
http://jsfiddle.net/MkLd4/
I am having issues horizontally centering my slideshow images so that they are central on all screen sizes / resolutions.
The HTML looks as such
<div id='banner'>
<div class='slides_container'>
<div>
<a href='#'><img src='images/banner.png'></a>
</div>
<div>
<a href='#'><img src='images/banner2.png'></a>
</div>
</div>
</div>
And the CSS to match this is:
#banner {
width:100%;
margin-bottom:50px;
}
.slides_container {
width:100%;
height:500px;
}
.slides_container div {
width:1100px;
height:500px;
text-align:center;
}
I am really struggling here to get the image to center on all screen sizes since padding and margins don't work I am in need of a different method!
Any replies are extremely appreciated.
You should make sure the .slides_container div is centered within its parent, i.e.
.slides_container div {
margin: 0px auto; // center
width:1100px;
height:500px;
text-align:center;
}
If that doesn't work, you need to make sure the parent container is width 100% of the page.
If the parent is not width 100% of the page, the parent needs to have this property also:
.slides_container {
margin: 0px auto;
}
If that doesn't work, then you need to make sure its parent is 100% width of the page.
Hope this helps.
Edit
I took a look at it in FireBug, and it was immediately apparent that the slide container is set to 3800px wide, and the div inside doesn't have a width set. If you set the div inside the slide container to 100% width, it will cause it to become 3800px wide, so that won't work.
By the nature of the script you are using, it is using an abolute-positioned div to work. So margin: 0px auto won't work here.
The solution is a bit of javascript to run onload, and on window resize, to set that div which holds the image to the width of your browser window, and text-align: center. So for example, since I have 1280px wide monitor, this centers the image for me:
.slides_control div {
width: 1280px;
text-align: center;
}
Add .slides_container img and margin:0 auto
#banner { width:100%; margin-bottom:50px; }
.slides_container {
width:100%;
height:500px;
}
.slides_container div, .slides_container img {
width:1100px;
height:500px;
text-align:center;
margin:0 auto; }
Normally they use margin:0 auto; to handle this. text-align won't do you good for div.
I got headache how to make my fluid content will float to right.
left sidebar is fixed size.
right content is fluid size.
Here and example my html and css
How to make my id="content" will float on right?
Set a margin and remove the float/width on #content, like so:
HTML:
<div id="wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
CSS:
#wrapper {
width:400px;
overflow:hidden;
padding:10px;
}
#sidebar {
float:left;
width:100px;
}
#content {
margin: 0 0 0 100px;
}
div {
border:1px solid #333;
}
http://jsfiddle.net/HWMJc/1/
There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites. Dont need put a float or width on the fluid div at all.
http://jsfiddle.net/HWMJc/874/
#sidebar {
float:left;
width:100px;
}
#content {
overflow:hidden;
}
You should set it to be:
sidebar{ width:100px; float: left}
Don't use 100% width on #content.
70% works, but there is a small gap between the two elements. You can adjust it to make it fit better though.