I'm having a little difficulty getting this fade effect to work. I basically have two images on top of each other, and I have a hover effect that makes the opacity of the top image go to zero, which reveals the second image.
This effect is currently working when I have only one section. When I add another section, everything goes out of place. I suspect this has something to do with the fact that I'm using position: absolute, but I'm not sure how to go about fixing it.
I made a simple example to show you what is happening. This is what it looks like with one section (functional):
<body>
<header>
<h1>Projects</h1>
<h3>
Home | GitHub
</h3>
</header>
<hr>
<section>
<h2>Some project</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="container">
<img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
<img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
</div>
</section>
</body>
header {
text-align: center;
}
section {
width: 960px;
margin: 0 auto;
}
.container {
position: relative;
}
img {
position: absolute;
width: 650px;
height: 400px;
display: block;
}
.main {
z-index: 5;
transition: opacity .3s ease-in-out;
}
.main:hover {
opacity: 0;
}
You can see it here: http://jsfiddle.net/503dhw51/
When I try using two sections, the entire thing breaks. This is the code for two sections:
<body>
<header>
<h1>Projects</h1>
<h3>
Home | GitHub
</h3>
</header>
<hr>
<section>
<h2>Some project</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="container">
<img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
<img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
</div>
</section>
<section>
<h2>Some project</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="container">
<img class="main image" src="http://i.imgur.com/EkfA9Tl.png" alt="">
<img class="image" src="http://i.imgur.com/PWsXij1.png" alt="">
</div>
</section>
</body>
and the CSS is the same.
Here is the jsfiddle for it: http://jsfiddle.net/5asgswxr/1/
I basically have two issues I need to fix:
Getting this to work for multiple sections
Somehow centering the images once I've fixed the first part
I would appreciate any help with either of these issues. Thanks in advance!
Here is my attempt. You can use this with other tags instead of images.
/*assures images to be of the same size*/
.frame { height: 300px; width:300px; }
/* code for effect you are looking for*/
figure { overflow: hidden; position: relative; border:solid lightgray 2px;}
.img1 { left: 0; position: absolute; right: 0; top: 0;
-webkit-transition: all 100ms ease-out;-moz-transition: all 500ms ease-out;transition: all 500ms ease-out;
border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;
}
.img1:hover { opacity: 0;}
/** important having things not "float" around*/
.clearfix:after { content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
edit: Ahh.. I should have looked at the other submission before posting mine. Sorry.
As you suspected, the issue is that you are absolutely positioning all of the img elements. When an element is absolutely positioned, it is removed from the normal flow, resulting in other elements not taking it into consideration (thus, the overlap).
Since the .container element only contains absolutely positioned elements, it collapses upon itself and has a height of 0. To avoid this, one option would be to set an explicit height/width on the parent element.
Alternatively, the better option would be to only absolutely position a single img element. In doing so, the .container element will remain in the normal flow (because one of the img element's isn't removed from the flow). In this case, you could absolutely position the img element with class .main. In doing so, the other img element remains in the normal flow and defines the height/width of the parent, .containerelement.
Updated Example
.container {
position: relative;
}
.container img.main {
position: absolute;
}
For your second question (about centering), take a look at this updated example.
Related
To make it simple: I have a page with a div as right panel
.rightPanel{
position: fixed;
right: 0px;
}
This panel has a a few div inside (header, titles, etc.) and a div with the body. I need an extra div at the bottom where I will place the action bar.
I have tried
.actionBar{
position: absolute;
bottom: 20px;
}
The problem with this approach is that when the body is too big, the action bar will be on top of it. I would like a scroll bar on the body, if needed, with the action bar always fixed at the bottom.
<div class="rightPanel">
<header> .. </header>
<div class="body"> .. </div>
<div class="actionBar"> .. </div>
</div>
I don't want to give a fixed height to the body as it is dynamically crated.
Use flexbox to have a dynamic middle section. Here's a working demo:
body {
padding: 0;
margin: 0;
}
.rightPanel {
display: flex;
flex-direction: column;
position: fixed;
right: 0px;
width: 200px;
height: 100%;
border: 1px solid blue;
}
header {
width: 100%;
height: 30px;
border: 1px solid red;
}
.body {
flex-grow: 1;
width: 100%;
height: 100%;
overflow: auto;
}
.actionBar {
width: 100%;
height: 30px;
border: 1px solid red;
}
<div class="rightPanel">
<header> this is the header </header>
<div class="body"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="actionBar"> this is the action bar </div>
</div>
JSFiddle: https://jsfiddle.net/x52rq6du/1/
What you'll want to do is make .rightPanel a flexbox element, and give it display: flex and flex-direction: column. Then simply give all children flex-grow: 1, apart from .actionBar, which you want to keep fixed to the bottom. Note that .rightPanel will need a height for this top work, and this height should also accommodate the offset.
This can be seen in the following:
.rightPanel {
position: fixed;
right: 0px;
top: 20px;
display: flex;
flex-direction: column;
height: calc(100vh - (20px * 2));
}
.rightPanel > * {
flex-grow: 1;
}
.actionBar {
flex-grow: 0;
}
<div class="rightPanel">
<header>Header</header>
<div class="body">Body</div>
<div class="actionBar">Action Bar</div>
</div>
You can use clear property.
The clear property tells on which sides of an element floating elements cannot float.
By using both value for clear. You can specify no element can float neither on right nor left side of the element. like below:
.actionBar{
position: absolute;
bottom: 20px;
clear: both; // I think this should solve the problem
}
Maybe you will need to get rid of position: absolute; as well
I'm trying to do a full-width split background colour with a centered content area. However, the content does not line up and is always off when the screen is resized.
The max-width is 1200px of the centered content area, the parent divs are split 60%/40%. When you do the math it's 720px/480px and should match the above div.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.site-content {
clear: both;
max-width: 1200px;
margin: 0 auto;
padding: 32px 0;
position: relative;
}
.site-content,
.left_container >div,
.right_container>div {
border: 1px solid #000;
}
.left_container,
.right_container {
padding-bottom: 100%;
margin-bottom: -100%;
/*Fixes float height*/
}
.left_container >div,
.right_container>div {
position: relative;
}
.left_container {
float: left;
width: 60%;
background-color: #ced7db;
}
.left_container > div {
float: right;
max-width: 720px;
}
.right_container {
background-color: #999;
float: right;
width: 40%;
}
.right_container > div {
max-width: 480px;
}
<header>
<div class="site-content">
<h1>Heading<h2>
</div>
</header>
<div id="introduction" >
<div class="left_container">
<div>
<h2>Left</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="right_container">
<div>
<h2>Right</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
The desired outcome of this would be to have the heading area and content area aligned on the left and right edge, while the backgrounds extend to the end of the browser. I have tried using the gradient background method, the percentage width is still thrown off.
I wasn't able to do exactly what I wanted So I settled for the parent background gradient method. Example here:
CSS: Set a background color which is 50% of the width of the window
I have this code:
html:
<div class="tile">
<h3>short</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="tile">
<h3>longLongLong longLongLong longLongLong</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
css:
.tile{
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
}
.tile h3{
min-height: 20px;
max-height: 61px;
display: inline-block;
overflow: hidden;
}
.tile .content{
height: 162px;
overflow: hidden;
margin: 0 10px;
}
fiddle:
http://jsfiddle.net/v8Lhxk2v/
and I get this layout
but I need to get something like next image, without using js.
Can that be solved?
Depending on browser support you can use flex.
The container would need:
display: flex;
flex-flow: column;
Here's a quick demo with example markup:
http://jsbin.com/xuwina/3/edit?html,css,output
Look at this
http://jsfiddle.net/v8Lhxk2v/4/
playing with border-bottom and overflow:hidden on the parent element.
.tile{
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
border-bottom: 22px solid #cecece;
overflow: hidden;
}
.tile h3{
min-height: 25px;
max-height: 61px;
display: inline-block;
overflow: hidden;
}
.tile .content{
margin: 0 10px;
}
I would say try to position the content absolute to the bottom of the tile.
In that case you can set the space where the content should end. Still you need to add an extra class to your content with the smaller title to be it larger than the other tile with the larger title.
Your HTML would be:
<div class="tile">
<h3>short</h3>
<!-- Added an extra class to the div -->
<div class="content small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
Within your CSS I changed this:
.tile .content{
height: 162px;
background-color:grey;
overflow: hidden;
margin: 0 10px;
position: absolute;
bottom:30px;
}
.tile .small{height:216px;}
And then you get this result: JSFIDDLE
Let me know if this is a solution that works for you.
Solving this problem is pretty simple with flexbox.
By creating a column flex container the flex items stack vertically. You can then apply flex: 1 to the text box (.content) which makes it expand the full available height of the container.
HTML
<div id="container"><!-- container to align .tile boxes in flexbox row;
(this flexbox is optional) -->
<div class="tile">
<h3>short</h3>
<div class="content">Lorem ipsum dolor sit amet ... </div>
</div>
<div class="tile">
<h3>longLongLong longLongLong longLongLong</h3>
<div class="content">Lorem ipsum dolor sit amet ... </div>
</div>
</div><!-- end #container -->
CSS
#container {
display: flex; /* establish flex container;
aligns flex items (child elements) in a row by default; */
}
.tile {
display: flex; /* establish (nested) flex container */
flex-direction: column; /* override default row alignment */
height: 300px;
width: 200px;
background: #cecece;
/* float: left; */
margin: 0 10px 0 0;
}
.tile h3 {
min-height: 20px;
max-height: 61px;
/* display: inline-block; */
overflow: hidden;
}
.tile .content {
flex: 1; /* tells flex item to use all available vertical space in container */
height: 162px;
overflow: hidden;
margin: 0 10px 40px 10px; /* added bottom margin for spacing from container edge */
}
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
Using Ellipsis (...)
If you want to apply ellipsis to a single line of text, CSS makes that somewhat easy with the text-overflow property. It's still a bit tricky (due to all the requirements), but text-overflow makes it possible and reliable.
If, however, you want to use ellipsis on multi-line text – as would be the case here – then don't expect to have any fun. CSS doesn't provide a single property for doing this, and the workarounds are hit and miss. For details and methods see my answer here: Applying Ellipsis to Multiline Text
Well, pretty easy... make <div class="move"></div> and put your h3 into it like:<div class="move"><h3>Short</h3></div> now style that move div like so:
.move{height:100px;}
it workd, you are done :)
PS: make it with both of your h3s :)
well, there is a code:
css:
.tile{
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
}
.tile h3{
min-height: 20px;
max-height: 61px;
display: inline-block;
overflow: hidden;
}
.tile .content{
height: 162px;
overflow: hidden;
margin: 0 10px;
}
.move{height:100px;}
html:
<div class="tile">
<div class="move">
<h3>short</h3>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="tile">
<div class="move">
<h3>longLongLong longLongLong longLongLong</h3>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
I would try another aproach. Using jquery you can calculate on window load the height of the highest h3 and then, apply that height to all your h3 inside your tiles.
I know you asked for a pure css solution, so it's ok if I don't get any credit, but I think this answer may be usefull for other users with the same problem so that's why I wrote it.
Something like this:
var maxHeight = -1;
$('.tile h3').each(function() {
if ($(this).height() > maxHeight)
maxHeight = $(this).height();
});
$('.tile h3').each(function() {
$(this).height(maxHeight);
});
As you can see in this JSFIDDLE (notice I removed the fixed max-heightyou added to the header and add a third tilewith a "very long text" so you can check the exmaple better.
Try this use extra div with wrap. h3 & div.content tag are wrapped by extra div and some css to be change as following:
.tile > div {
height: calc(100% - 20px);
margin: 10px;
overflow: hidden;
line-height: 22px!important;
}
.tile {
height: 300px;
width: 200px;
background: #cecece;
float: left;
margin: 0 10px 0 0;
}
.tile h3 {
min-height: 20px;
display: inline-block;
overflow: hidden;
margin: 5px 0;
}
.tile .content {
margin: 0;
}
<div class="tile">
<div>
<h3>short</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
<div class="tile">
<div>
<h3>longLongLong longLongLong longLongLong</h3>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
How about a fixed height:
.tile h3 {
height: 65px;
display: inline-block;
overflow: hidden;
}
Or accompanied by js (jQuery):
// Height handler
var headHeight = 0;
// Iterate throug all H3s an get highest
jQuery( 'h3' ).each( function() {
// Get current height
var currentHeight = jQuery( this ).height();
// If higher as handler set as handler
if( currentHeight > headHeight ) {
headHeight = currentHeight;
}
} );
// Set the height of all H3s
jQuery( 'h3' ).css( 'height', headHeight );
This would be a pretty robust solution ...
you can resolve by the flexbox Flexible Box Layout Module:
.tile{
...
/* add the following line */
display: flex;
flex-direction: column;
justify-content: space-between;
...
}
http://jsfiddle.net/57yLgxsx/
This example works on Chrome you can check for the browser compability on caniuse.com
and then add the correct prefixes.
It depends on who you want to ensure compatibility ( last 2 vorsion of all browser, mobile or desktop or both ).
keep in mind that there are two versions of flexbox, the "old" and the "new". What I wrote above is the new.
This link can clarify some ideas
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm currently developing a website, one of my first bootstrap websites.
Facing a problem that I've been trying to solve for a few hours now.
I'm placing a divider or separator that I made in photoshop (png image) on the edge of a section.
It looks like this on desktop size:
https://www.dropbox.com/s/qxf7dheb0k79q2b/Screenshot%202014-09-30%2023.02.50.png?dl=0
But on smaller screens this happens:
https://www.dropbox.com/s/w4je7milallfrqn/Screenshot%202014-09-30%2023.10.50.png?dl=0
I'm sure it due to my bad CSS.
Here is my html and css:
<section class="hero-section text-center">
<img class="separator img-responsive"src="images/separator.png">
<div class="container">
<h1>Download Now</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<button class="btn btncta">Download Now</button>
<p class="small">*Needed for developers</p>
</div>
</section>
CSS:
.separator{
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:318px;
}
Any way I could fix this?
Is it using a image for divider outdated (probably is)?
There's nothing wrong with using that separator image approach, but you're doing it wrong. Just replace your CSS like this:
.separator{
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:0px;
width:100%; height:1px;
}
and your HTML like this:
<section class="hero-section text-center">
<div class="container">
<h1>Download Now</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<button class="btn btncta">Download Now</button>
<p class="small">*Needed for developers</p>
</div>
<img class="separator "src="images/separator.png">
</section>
I did a bootply so you can see (the background color is not needed, is just so you see the effect since I don't have your image)
Adding new method based in new information:
/* CSS used here will be applied after bootstrap.css */
body {
background:#f00;
}
.separator {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:0px;
background:#f00;
width:100%;
height:1px;
}
.hero-section {
background:#fff url('http://www.customstairsandmouldings.com/images/circle.jpg') no-repeat center bottom; / we center the background and position it at the bottom of the div */
padding-bottom: 100px; /* padding-bottom has to be enough to give room to the image in the background, so if image height is 80px, padding bottom should be at least 80px, or better 100px to add spacing */
}
See new Bootply here
I want to position a div in the middle of the page. The solution I found on the internet assumes that the div will be of static size. I need the div to be in the middle, if the content is the right size, but if it is over the size of the div, it should become bigger, and eventually allow scrolling without changing the width.
PS: I don't need support for IE, just XULRunner (Firefox) and Webkit based browsers.
Edit: The whole page must be scrollable, not just the content div. And I need to preserve all the line breaks.
Here you go:
<style>
.container{
border: 1px solid Red;
width: 300px;
height: 500px;
display:table-cell;
vertical-align:middle;
}
.content{
border: 1px solid Blue;
width: 100px;
height:auto;
min-height: 100px;
max-height:200px;
margin-left:auto;
margin-right:auto;
overflow:auto;
}
</style>
<div class="container">
<div class="content">
add content here
</div>
</div>
How it looks like:
Test it.
If you don't need IE support use vertical-align property:
make the body displays as table
an outer div as table-cell and set it's vertical-align as 'middle'
like:
<style type="text/css" media="screen">
html{
height: 100%;
}
body {
width: 100%;
height: 100%;
display: table;
margin: 0;
}
#div_1 {
display: table-cell;
text-align: center;
vertical-align: middle;
line-height: 100%;
}
#div_2 {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: auto;
}
</style>
<body>
<div id="div_1">
<div id="div_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
EDIT: A more cross-browser implementation you would make the body like that:
<body>
<table>
<tr><td>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</td></tr>
</table>
</body>
once display: table doesn't works well with IE7 and early (looks like should work on ie8, but I still couldn't make it)