I want make two divs: image and description for image. If there is not enough space for 100% image size, this image must be smaller. Description div should have a fixed size on the right of the image.
In my code, if I reduce browser width the div with the image description moves under the image instead of staying to the right.
How I can fix this?
.parentdiv
{
width:100%;
height: auto;
border: 1px solid black;
}
.imgdiv
{
width:auto;
border: 1px solid green;
float: left
}
.textdiv
{
width: 200px;
height: 400px;
border: 1px solid red;
float: left
}
.imgdiv img
{
max-width:100%;
max-height:100%;
}
<html>
<body>
<div class="parentdiv">
<div class="imgdiv">
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png">
</div>
<div class="textdiv">
Description
</div>
</div>
</body>
</html>
I think you need this : demo
CSS:
.parentdiv {
width:100%;
float:left;
}
.imgdiv {
margin-right:210px;
}
.imgdiv img {
width:100%;
}
.textdiv {
width:200px;
float:right;
}
HTML:
<div class="parentdiv">
<div class="textdiv">Description</div>
<div class="imgdiv">
<img src="http://4.bp.blogspot.com/-JOqxgp-ZWe0/U3BtyEQlEiI/AAAAAAAAOfg/Doq6Q2MwIKA/s1600/google-logo-874x288.png">
</div>
</div>
If available you can use the CSS3 functionality calc().
Set a min-width of 100% on the image, and reduce it with the 200px of the right div.
Like so
max-width: calc(100% - 200px);
Also, I set a border-box on the elements with a border so it all fits. Keep in mind that when you add padding to these elements now, the element does not increase in size.
Fiddle
Related
I have two elements aligned horizontal.
I want the right one to have a dynamic width and the left one to take up as much space as is left. How Do I do that?
Se JSFiddle
or code
<div class="wrapper">
<div style="background:red;" class="one">hello</div>
<div style="background:blue" class="two">dude</div>
</div>
.wrapper > div {
border: 1px yellow solid;
display: table-cell;
height:80px;
}
.one {
width: 100%;
}
.two {
width: 100px;
}
.wrapper {
width:100%;
height:200px;
border:2px solid blue;
}
.right {
height:200px;
width:60%;
background:red;
float:right;
}
.left {
width:auto;
height:200px;
background:green;
}
}
<div class="wrapper">
<div class="right">hello</div>
<div class="left">dude</div>
</div>
You can align two element like div horizontal to each other having right element can be dynamic and left element set his width automatically. To take width automatically you can use width:auto; property for first div. And second div having some width in percent or pixel so first div can take remaining width and set it right using float right property. I have created it with example.
If you change width of right element then width of left element will take remaining width automatically.
you can also take reference
Help with div - make div fit the remaining width
try this..
<div class="wrapper">
<div style="background:red;" class="one">hello</div>
<div style="background:blue" class="two">dude</div>
</div>
.wrapper > div {
border: 1px yellow solid;
display: table-cell;
height:80px;
}
.one {
width: 100%;
}
.two {
width: auto;
}
hey there is there a way i can align the contents of a div tag to the bottom without using position:absolute. almost all other solutions on the internet uses position:absolute and/or vertical-align:bottom, but is there a way to do this without using position:absolute , let's say for example how do i align the cat in the image to the bottom of the div in this fiddle thanks!
the other solution i was thinking of was filling up the empty space at the top so that the image gets pushed down to the bottom but i also have no clue on how to do that either.
P.S. Please don't suggest using tables in the div, if that's possible.
You could try something like
<div style="border:1px solid black; height:100px; display:table; width:100%;">
<div style="display:table-cell; vertical-align: bottom;">
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:block;" />
</div>
</div>
You can use flexbox to solve this problem: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Demo
html
<div class="content">Content</div>
<div class="footerLike">
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>
css
.content {
height:calc(100% - 102px); /* 100% - height of footer - borders */
}
.footerLike {
border:1px solid black;
height:100px;
}
body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
Demo, as said in comments
<div class="footerLike">
<div class="dummy"><!-- you can put anything here --></div>
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>
.footerLike {
border:1px solid black;
height:100%;
}
img {
height: 100%;
display: block;
}
.dummy {
height: calc(100% - 100px);
}
body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
This is the layout i want,
I made some with code, but i'm not sure how to do after this.
[html]
<div id="content">
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
[css]
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50px;
}
#right{
float:left;
width: 50px;
}
#bottom{
/*what do i have to do in here?
float:*/
}
You could do something like this:
Set clear:both on #bottom. Add width:50% to both #left/#right.
Finally, specify the borders on the elements and add box-sizing in order to include the borders in the element's width calculations.
jsFiddle example
#content {
border:1px solid black;
}
#content > div {
height:100px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
#left {
float:left;
width: 50%;
border-right:1px solid black;
}
#right {
float:right;
width: 50%;
}
#bottom {
border-top:1px solid black;
clear: both;
}
This is what you want for the bottom div:
#bottom{
clear: both;
}
For #bottom, you want float:left;width:100px; Just try that, see if it works.
You could also try using positions to do it, if you don't need the size of them to change:which it looks like you don't. For example:
#Left {width:50px;height:50px;position:absolute;left:0px;top:0px;}
#Right {width:50px;height:50px;position:absolute;left:50px;top:0px;}
#Bottom {width:100px;position:absolute;left:0px;top:50px;}
I feel much more confident the second will work.
Here is how I would do it personally: http://jsfiddle.net/T5fW3/
<div id="content">
<div id="top">
<div id="left">
<div class="container"> Left </div>
</div>
<div id="right">
<div class="container"> Right </div>
</div>
</div>
<div id="bottom">
Bottom
</div>
</div>
I use a container so that if you want to add styles (border, margins, padding etc) they don't mess up the 50%. You can now resize content to whatever size and your proportions will still be the same.
#content{
/* the width in here will be changed
width: this requirment will be changed
i dont' want to type my left, right content static
is there a way? */
}
#left{
float:left;
width: 50%;
}
#right{
float:left;
width: 50%;
}
#bottom{
border: 1px solid black;
clear: both;
}
.container {
border: 1px solid black;
}
the border in the container class and bottom id is there just for illustration. If you were to add the border to #left or #right your layout will break. Notice also, I use 50% instead of 50px.
I need to show a picture and text next to it, but the problem is that the picture is too big and I need to reduce it by setting custom width and height.
CSS:
#list{
max-height:200px;
overflow-y:auto;
padding:5px;
/*display: none;*/
}
.info{
border: 1px dashed #CCCCCC;
margin-bottom: 5px;
padding:0 5px;
overflow: hidden;
cursor: pointer;
}
.info .image{
width:20%;
height:30%;
display:inline-block;
margin-right:20px
}
.info .image img{
width: 100%;
height: 100%;
}
.info .text_data{
display: inline-block;
}
HTML:
<div id="list" class="select_block">
<div class="info">
<div class="image">
<img src="https://dl.dropbox.com/u/14396564/screens/screenshot.jpg">
</div>
<div class="text_data">
<p>
Name: Some name
<br />
Start: 2012-05-17 04:43:40
<br />
End: 2012-05-17 04:43:40
</p>
</div>
</div>
</div>
http://jsfiddle.net/nonamez/e5hyX/
In Firefox it's like
In Safari (probably in chrome is the same)
So I need something like this (hover on the picture shows it in full size, so I only need a list of previews, but with percentage).
If you only set the height or the width, the browser will scale the image in proportion to its natural dimensions. If you need to make sure that it stays inside a given area, make sure you use the max-* properties. For example:
width:50%;
max-width:100px;
max-height:80px;
Here is my HTML:
<div id="container">
<div id="left-container">
</div>
<div id="right-container">
</div>
</div>
The container is 100% height (I checked it with Firebug). But the #left_container needs to be 100% too and it isn't!
Below is my CSS and a screenshot. The yellow should be 100%. Yellow is the background of the #left-container
html, body {
height: 100%;
}
#container {
position:relative;
margin: 0 auto;
width: 100%;
height:100%;
height: auto !important;
min-height:100%;
background: #fff;
}
#left-container {
width: 300px;
background: #ff0;
height:100%;
height: auto !important;
min-height:100%;
}
This article discusses both the issue and solution in detail:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
This might help too:
<style>
#outer {position:absolute; height:auto; width:200px; border: 1px solid red; }
#inner {position:absolute; height:100%; width:20px; border:1px solid black; }
</style>
<div id='outer'>
<div id='inner'>
</div>
text
</div>
See here for more details on the above:
How to make a floated div 100% height of its parent?
The best way to approach this problem is to think outside the box a little. There's no reason that both containers need to stretch to 100% if you're just concerned about the background stretching for both of them. There's a really simple technique called Faux Columns in which you combine the backgrounds for both sidebars into one single background image, and set the main container's background to that image. When a longer sidebar stretches the main container, it brings down the background for both sidebars.
<style>
#outer-container {
height:200vh;
width:100%;
position:relative;
background-color:orange;
}
#left-container{
position:absolute;
width:100%;
height:100%;
background-color:blue;
}
</style>
<body>
<div id="outer-container">
<div id="left-container">
</div>
</div>
</body>
You should be able to use just
margin:0;
padding:0;
height:100%;
For the conatainers to get what you want.