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
Related
How to make a cross browser solution where an element is vertical aligned?
http://jsfiddle.net/e2yuqtdt/3/
This works in both Firefox and Chrome, but not in IE11
<div class="page_login">
<div>vertical-align:center; text-align:center</div>
</div>
html, body {
height:100%;
}
.page_login {
display:flex;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
}
update
When the centered element is higher than the viewport height the background is only 100% and not 100% scroll height
http://jsfiddle.net/e2yuqtdt/8/
html, body {
min-height:100%;
height:100%;
}
.page_login {
display:flex;
min-height:100%;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
How to make a cross browser solution where an element is vertical
aligned?
Take a look at this fiddle: http://jsfiddle.net/5ry8vqkL/
The technique applied there is using the "display: table". Here is an article for an in-depth view of the approach http://css-tricks.com/centering-in-the-unknown/
Supported browsers can be seen here: http://caniuse.com/#search=table-cell
HTML:
<div class="container">
<div id="page-login">
<div class="panel">Some content</div>
</div>
</div>
CSS:
html, body {
min-height:100%;
height:100%;
}
.container {
display: table;
height:100%;
width:100%;
background:#303030;
}
#page-login {
display: table-cell;
vertical-align: middle
}
.panel {
height: 100px;
background-color: #fff;
}
You need to add a height to the div. As you have only specified a minimum height, IE automatically expands it to the max possible. So add a height, like this:
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
height:200px;
}
http://jsfiddle.net/e2yuqtdt/6/
As this is a flex box, and therefore meant to flex, a good idea could be to make the height a percentage. So the div height would be - for example - 50% of the page height, unless the page was less than 200px high - then it would be 100px high.
Update: Unfortunatly it is not possible to make the div fill the whole page with only CSS. However it seems it is possible with Javascript, see here Make a div fill the height of the remaining screen space
Actually - have achived it using tables divs
http://jsfiddle.net/e2yuqtdt/14/
<div>
<div id="div1">
<div id="div2">vertical-align:center; text-align:center</div>
</div>
</div>
#div1 {
display:flex;
height:100%;
width:100%;
background:#303030;
}
#div2 {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
I know this update is coming after the one by elad.chen - but had already done this and posted it in the comment below - just hadn't got round to updating the question.
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 feel like I shouldn't be asking such a simple question but I can't find any simple answers out there.
I have a header which can be any height. The content beneath it needs to fill up the remaining space on the page (Both are contained in a necessary container div). How can this be achieved with HTML and CSS? I would consider JavaScript but I want resizing to be automatic when content is added, or the window is resized etc.
HTML code:
<div id="container" >
<div id="header" >
<br/>
<br/>
...variable content in the header (not necessarily text)...
<br/>
<br/>
</div>
<div id="content"></div>
</div>
CSS code:
#container
{
background-color:blue;
width:100%;
height:100%;
}
#header
{
background-color:green;
width:100%;
height:auto;
}
#content
{
background-color:red;
width:100%;
height:100px; /*The height here needs to fill the remaining space in the container div*/
}
I think this may help do what you want to do: http://jsfiddle.net/AGLDV/3/
html, body {
height:100%;
}
#container {
width:100%;
height:100%;
background:#ccc;
display:table;
}
#header {
height:1%;
width:100%;
background:blue;
display:table-row;
}
#content {
width:100%;
background:red;
display:table-row;
}
Fiddle
I set the header height to height: auto; and then added overflow: hidden; to the body, html style.
Just add any text or <br /> in the header and the height will change.
I need the content div to 'fill' the remainder of the screen left over after the header. I would would like to keep the wrapper padding & margin. Using absolute position doesn't work as the content div stops being visually nested in the wrapper. (The header div can be a fixed height if absolutely necessary, however I would prefer it to be dynamic.) Many thanks.
* {
margin:0px;
padding:0px;
}
html,
body {
height: 100%;
}
#wrapper {
background-color:#eee;
margin:20px; padding:20px;
border: solid 1px #333;
}
#header {
}
#content {
background-color:red;
}
.
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
Fiddle here:
http://jsfiddle.net/jHLhK/
Specify width and height set to 100% to your content div.
#content {
background-color:red;
width:100%;
height:100%;
}
The 100% means it will be as much as it has space available from surrounding elements.
Or you may only want height or only width to be 100% depending on your requirement.
There...
#logoWrapper{
background-image: url(../image/bg_img.jpg);
height:86px;
width:100%;
}
Q> How to fix the size of the image get into #logoWapper same with its Wapper automatically?
#logoWrapper img{ // not work
height:86px;
width:100%;
}
Thank you!
For a background image in CSS3 if you want to stretch not repeat you can use background-size: 100%;
Documented here http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Alternatively you can layer a absolute positioned image inside a relative positioned div and add an additional wrapper.
<style>
#wrapper {
position:relative;
...
}
#wrapper div, #wrapper img {
position:absolute;
top:0px;
left:0px;
...
}
</style>
<div id="wrapper">
<img ... >
<div> this goes on top of image</div>
</div>