As you can see in the attached pic, the .grid-item div doesn't have the exact height of the content inside it (in my case the <img>), but it seems to add a few pixel on the bottom.
How can I tell the .grid-item div to use the exact height of the image inside it?
Ideally if it's possible I'd like to keep absolute and relative positioning of the divs like it is in the example below.
HTML structure:
<section>
<div class="grid-item">
<div class="item-content">
<div class="caption">
<!-- .... -->
</div>
<img src="http://placehold.it/700x400/" alt="" />
</div>
</div>
</section>
CSS:
*{
box-sizing:border-box;
margin:0;
}
body{
font: 16px/1.5em sans-serif;
}
img{
width:100%;
height:auto;
position:relative;
}
section{
max-width:960px;
margin:0 auto;
}
section .grid-item{
width:50%;
float:left;
padding:20px;
}
section .grid-item .item-content{
position:relative;
width:100%;
overflow:hidden;
}
section .grid-item .item-content .caption{
position:absolute;
width:100%;
height:100%;
background:#333;
transform:translateX(-50%);
z-index:2;
}
-
FULL CODE:
http://codepen.io/anon/pen/zrydZX?editors=1100
Add display:block to your img rule: http://codepen.io/anon/pen/qbLXxd?editors=1100
Images are by default inline allowing you to vertically align them in blocks of text. The key disadvantages are that this then results in them also being affected by line height, font size, kerning, etc.
Related
I have a div with variable height (only an image with max-width:100% and auto height to scale it on resize).
So I would like to have a div with text overlaping this image div... Ok. But then I would like to have other div under this wrap with image..
Here's the problem.. I don't know the height of the div ('cause it deppends on the image height on resize) and then, when I try to continue the other divs that should be under this wrap, the get stucker under it 'cause its position is absolute!
<div id="wrap">
<div id="background">
<img src="http://i.imgur.com/hXtf2Dq.jpg" class="myImage" />
</div><!-- #wf_sliderItemBackground -->
<div id="mySubtitle">
dfdf
</div><!-- #background -->
</div><!-- #wrap -->
<div>
I CANT MAKE THIS DIV APPEAR UNDER THE IMAGE... I CANT USE DIMENSIONS SINCE I'M TRYING TO CREATE A RESPONSIVE LAYOUT AND USING HEIGHT IN PIXELS WOULD RUIN IT...
</div>
And here is the CSS:
* { margin:0; padding:0; }
#wrap {
width:100%;
display:table;
text-align:center;
}
#background {
width:100%;
max-width:100%;
position:absolute;
}
.myImage {
width: 100%;
max-width: 100%;
}
#mySubtitle {
margin:0 auto;
width:100%;
max-width:1200px;
background:green;
position:relative;
}
Check the fidddle:
http://jsfiddle.net/cjd6n0mm/
Since your text div is outside the wrap div, wrap should be relative with a height defined
#wrap {
width:100%;
position:relative;
display:table;
text-align:center;
height:50%
}
and cover your text div in specific div
div.a {
color:blue;
position:relative;
bottom:0;
}
Also, instead of hard reset *, use html,body reset, thats a rule of thumb
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
Fiddle demo
I have a fixed with container, lets say 1120px. Inside this container, i have a left sidebar which is 400px, and i need a right sidebar which is expanding from the container and touching the right side of the screen. Here is an image explaining the layout i want:
This is the progress i made so far: http://jsfiddle.net/UvxK8/
#wrapper {
background:#f0f0f0;
margin:0 auto;
width:400px;
overflow:hidden;
}
#wrapper .left {
width:100px;
float:left;
height:600px;
background:#333;
}
#wrapper .right {
position:absolute;
margin-left:100px;
height: 650px;
background: green;
min-width:100%;
}
Obviously its not good, because the right sidebar is too wide and a horizontal scrollbar appears.
The image you've used doesn't match your desicription of what you want; I think maybe you're looking at this the wrong way. If the right sidebar spills beyond the container, what's the point of the fixed width container at all?
From your image, it looks like what you want is...
HTML
<div id="header"><h1>Content here.</h1></div>
<div id="container">
<div id="container-left">
<p>Content here.</p>
</div>
<div id="container-right">
<p>Content here.</p>
</div>
</div>
CSS
#header {width:1120px;}
#container {width:100%; min-width:100%;}
#container-left {width:400px; float:left; }
#container-right {width:100%; min-width:100%;}
This will create the image illustration you've used. jFiddle here: http://jsfiddle.net/4JNX2/
Add position relative to your wrapper. try this
HTML
<div id="wrapper">
<div id="left">
</div>
<div id="right">
</div>
</div>
CSS
#wrapper
{width:1120px;
background:#096;
margin:0 auto;
position:relative;
}
#wrapper #left {
width:10%;
float:left;
height:600px;
background:#333;
}
#wrapper #right {
position:absolute;
margin-left:10%;
height: 650px;
background: green;
min-width:95%;
}
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I have a CSS problem that I can't seem to overcome. I'm attempting to push the img from the container DIV upwards to overlap the img in the top DIV.
I've tried quite a few methods that don't work. Z-Index doesn't have any effect on the layering of the images, my understanding of Z-Index is far worse than I thought it was and some guidance would be really helpful.
Here is the HTML:
<!-- DIV CONTAINS THE HEADER IMAGE AND SOCIAL MEDIA PLUGINS
Padding: 0; Margin: 0; Border:0; -->
<div id="head-image" class="image">
<!-- SOCIAL LINKS HERE -->
<img src="images/mainImg.png" alt="" />
</div>
<!-- DIV CONTAINS ALL THE CONTENT ON THE PAGE
padding:10px; Margin:0; Border:0; -->
<div id="container">
<div id="mapPlace">
<img src="images/activityIcons/map.jpg" alt="" />
</div>
<!-- TEXT DIV HERE -->
</div>
And my CSS rules
img {
position:relative;
}
#head-image {
position:relative;
width:520px;
height:482px;
z-index:5;
}
#head-image img {
z-index:5;
}
#mapPlace {
position:absolute;
top:-80px;
}
#mapPlace img {
z-index:10;
}
#container {
position:relative;
float:left;
clear:both;
min-height:100%;
padding:2%;
width:96%;
background-color:#000;
overflow:hidden;
color:#fff;
z-index:10;
}
Your code seems to work fine except that you have overflow:hidden on the container, which keeps the bottom image from ever getting up to the top image.
See this jsfiddle where I replace the images with div squares, and just removed the overflow:hidden:
http://jsfiddle.net/g72xV/
I'm trying to create a simple markup with header+content+footer+sidebar. The sidebar must float above the header and content element, and if it's taller than the content, it must push the footer down (like this: http://jsfiddle.net/gWLFN/7/).
The HTML:
<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="header">header</div>
<div id="content">content</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
</div>
The CSS:
#wrapper { width:500px }
#header { width:500px; height:100px; background-color:red }
#content { width:500px; height:300px; background-color:green }
#footer { width:500px; height:100px; background-color:blue }
#sidebar {
float:right;
margin-top:50px;
width:100px;
height:500px;
background-color: yellow;
border:1px solid white;
}
The problem is that in IE7, the sidebar pushes down the other elements. I think it's because the total widths of header+sidebar is greater than wrapper width. I have found a lot of posts about float:right problem in IE7, but all of them are for widths that doesn't exceede the wrapper.
I have choosen float:right instead of absolute positioning because the position of the footer must depend on sidebar height (if someone knows how to do this with absolute positioning, perfect!).
I would appreciate any idea to solve this.
You are almost there, the order of the HTML structure is slightly muddled and you are forcing CSS widths rather than letting the browser work out the best fit.
You can remove the width values from the nested CSS classes (except #sidebar) as, by default, they take up any remaining width unless they have one specified. Then you just need to swap #header and #sidebar round in the HTML structure and you are pretty much sorted.
Please note, since we have swapped round #header and #sidebar, the margin-top within #sidebar has been changed.
CSS
#wrapper {
width:500px;
}
#header {
height:100px;
background-color:red;
}
#content {
height:300px;
background-color:green;
}
#footer {
height:100px;
background-color:blue;
}
#sidebar {
float:right;
margin-top: -50px; /*changed this to -50px */
width:100px;
height:500px;
background-color: yellow;
border:1px solid white;
}
HTML
<div id="wrapper">
<div id="header">header</div>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
</div>
Working example: http://jsfiddle.net/gnx2z/