I would like to use height:50%, but the container's height is not defined, what's the correct solution?
<div id="container">
<div id="left-50">
<div id="left-50-1">1</div>
<div id="left-50-2">2</div>
</div>
<div id="image">
<img src="http://automarka.hu/images/stories/Audi%20A8%202.8%20V6%20FSI%202007.jpg">
</div>
</div>
#container {
overflow:hidden;
}
#left-50 {
float:left;
}
#left-50-1 {
height:50%;
width:50px;
background:yellow;
}
#left-50-2 {
height:50%;
width:50px;
background:purple;
}
#image {
float:left;
}
Jsfiddle url: http://jsfiddle.net/XqMDF/
the correct solution is to define container height.
or refer to the body or other defined element.
make container display:inline-block; to adjust to image height ... or define a fixed height.
DEMO: http://jsfiddle.net/XqMDF/2/
Point is: add position: relative; to #container, and position: absolute; to elements with height: 50%;. Also, apply display: block; to image. Then add left margin on #image. Value of that margin is width of elements with height: 50%; (50px in your example).
Here is demo with all properties.
http://jsfiddle.net/XqMDF/1/
Related
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
HTML:
<div>
<img>
<div>
<table>...</table>
</div>
</div>
CSS:
#img {
position: absolute;
right: 0px;
}
Both divs are the same size as the table.
I want the image to float top right of the table.
This results that the img is at the right side of the screen and not in the div.
You need to add position:relative; to the containing div. Also, I would advise against using tables unless you will be displaying tabular data, they should not be used for layout.
.container {
position:relative;
width:500px;
height:500px;
border:1px solid black;
}
.container img {
position:absolute; /* absolute misspelled in your example */
top:0;
right:0;
}
<div class="container">
<img src="http://placehold.it/250x250" />
<div>
<table></table>
</div>
</div>
img ignore width set to their parent. Apply width to img itself instead.
Also, you misspelled "absolute".
I have two divs inside a parent div.
both divs will occupy complete width of its parent.
first div has fixed height and I don't want to give height for second div, it should automatically occupy remaining height of the parent[I want to do this in css only].
below is jsfiddle link:
http://jsfiddle.net/x3ebK/3/
here is the html code:
<div id="content">
<div id="col1">content</div>
<div id="col2">content</div>
</div>
I need help in this.
I have updated the js fiddle below in below, I want "col2" to occupy remaining height of content div
http://jsfiddle.net/x3ebK/32/
It is convenient to use display:table rather than float like this:
DEMO : http://jsfiddle.net/x3ebK/28/
HTML:
<div id="content">
<div>
<div id="col1">content</div>
<div id="col2">content<br /><br /><br />content</div>
</div>
</div>
CSS:
#content {
height:auto;
position: relative;
width:300px;
background:#ccc;
color:#fff;
display:table;
}
#content > div{
display:table-row;
}
#col1 {
width: 30%;
background:#ff0000;
display:table-cell;
}
#col2 {
width: 70%;
background:#000fff;
display:table-cell;
}
You might want to read this article :
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
Hope this helps.
Is this what you are trying to achieve?
Have a fiddle!
CSS
html,body { height: 100%; }
#content {
height:100%;
position: relative;
width:300px;
float:left;
background:#ccc;
color:#fff;
}
#col1 {
width: 30%;
background:#ff0000;
float:left;
height:50px;
}
#col2 {
width: 70%;
float:right;
background:#000fff;
height:100%;
}
Try applying:
position: absolute; and height: 100%; to #col1
and
height: 100%; to #col2
Here is the updated fiddle: http://jsfiddle.net/nqYAp/
Try This#container{ height:100%}#col2{ height:inherit}
I'm trying to fill remaning area of screen with the second div, div 1 and 2 got fixed width. How could i achive this effect?
HTML
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
Problem can be fixed by using this CSS code, when second div is set to auto it will fill remaning area left to be filled.
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green;
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
Edit
Classically, this would look like this:
CSS:
#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}
#div3 {
float:right;
width:400px;
height:200px;
background-color: green;
}
HTML:
<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>
DEMO: http://jsfiddle.net/NicoO/5AJkn/
P.S: expand your screen > 800px to prevent the layout from breaking. Could also be solved by adding a min-width to a new parent element.
If your browser support calc, you coudl try:
#div2 { float:left; width:calc(100% - 800px); height:200px; }
Add the margins too, if any.
<style>
.box{display: table;width: 100%;}
#div1{width:400px; height:200px;background: #000;display: table-cell}
#div2{width:auto; height:200px;background: #e6e6e6;display: table-cell}
#div3{width:400px; height:200px;background: #000;display: table-cell}
</style>
<div class="box">
<div id="div1"></div>
<div id="div2">ds</div>
<div id="div3"></div>
</div>
It is the same questions that :
Positioning two divs, one with fixed width(left div) and other in percentage(right div)
Two divs side by side, one with google map and second with fixed width
This Codepen fix your problem
Apply position: relative for their parent (if it is not positioned already) and
apply the following to div2:
#div2{
position:absolute;
left:400px; /* width of div1 */
right:400px; /* width of div3 */
height:200px;
}
JSFiddle
You can use css3 calc() function if older browser support is not an issue.
#div2{
display:inline-block;
width: calc(100% - 800px); /*100% - width of div1 and div3 */
height:200px;
}
JSFiddle
Here is our html:
<div id="1" class="right">
<div class="top"><img src=".png" alt=""></div>
<div class="content">Some dynamic text</div>
<div class="bottom"><img src=".png" alt=""></div>
</div>
And here's our CSS:
.right{position:relative; top:-304px; width:170px; height:191px;}
.content{background:url(.png) repeat-y; width:170px;}
How do we vertically align the content of #1 to always be at the bottom? Design and technical limitations mean we cannot use any CSS table properties or JavaScript.
demo (scroll to bootom of fiddle to see the image)
.right {
position:relative;
top:304px;
width:170px;
height:191px;
}
.content {
background:url(.png) repeat-y;
width:170px;
}
.bottom {
position:absolute; /* this is the key */
bottom:0;/* this is the key */
}
.bottom >img {
width:100%;
}
to do : use absolute child, of a relative parent div
Added explanation : since your .right has top:-304px; and the whole div has no content and height : 191px, so the entire markup has height = -113px (-304+191), so you wont be able to see anything...change the height to see it.
see what i am talking about
EDIT
Assuming you have fixed height div, here is a solution without using position
.right {
width:170px;
height:400px;
border:1px solid #000;
}
.content {
background:url(.png) repeat-y;
width:170px;
}
.bottom {
margin-top:300px;
margin-bottom: -200px; /* the bottom margin is the negative value of the footer's height(200px) */
}
.bottom >img {
width:100%;
}
You should change the class .right to this:
.right{
position:absolute;
bottom: 0;
width:170px;
height:191px;
}
I hope this help you :)