I am designing a webpage that needs to be split into 4 equal DIVs. This would be easy if I didn't also need to overlap text onto two of these DIVs. So, I have decided the best route would be to stack two container DIVs on top of each other, each with a width of 100% and height of 50%. Then, I would split these into two DIV classes, each with a height of 100% width of 50%, thus giving me 2 DIVs per container DIV, which are 2 in number.
My current CSS:
#collectionsTop {
width: 100%;
height: 50%;
overflow:hidden;
margin: 0 auto;
}
.topRight {
background-color:red;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
.topLeft {
background-color:blue;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
#collectionsBottom {
width: 100%;
height: 50%;
overflow:hidden;
margin: 0 auto;
}
.bottomRight {
background-color:yellow;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
.bottomLeft {
background-color:green;
width:50%;
height:100%;
float:left;
clear:both;
display:inline-block;
overflow:hidden;
}
And my HTML:
<div id="collectionsTop">
<div class="topRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
<div class="topLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
</div>
<div id="collectionsBottom">
<div class="bottomRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
<div class="bottomLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
</div>
Apparently, none of the above works in any capacity at all, displaying the images in their full resolution, not floated, and in no way limited by their parent DIVs. I have no idea why. Please help.
You have placed - clear:both in the css of topLeft , topRight elements
idea => clear:both; - No floating elements allowed on the left or the right side of a specified element ,
hence in your case also similar thing is happening,
check this fiddle : http://jsfiddle.net/4q4Jz/
update:
now check the fiddle.. demo
remove all the `clear:both;
and try it.
`
Related
UPDATE
EDIT: Sorry guys, I'm afraid that I defined the problem wrong, my bad.. I need this to have a image carousel (YELLOW) break out of the main text division (RED); only on the right side. So what would work as well for me is something like this:
Fiddle: Link
HTML:
<div class="red">
This would contain the main text
</div>
<div class="yellow">
this div's left border should align with the red divs
<br/>
<br/>
this would be the image carousel
</div>
<div class="red">
this would also contain the main text
</div>
CSS:
.red{
position:relative;
height:100px;
width:500px;
margin:0 auto;
background-color:#ff0000;
}
.yellow{
position:relative;
height:200px;
width:100%; /* idk how to solve this */
background-color:#ffff00;
right:0px;
left:100px; /*how to align this left border to the other red divs? */
}
Now the main problem is to align the left border of "yellow" with the left border of the text divs (red).
I hope I'm being clear enough. Thanks for all the help so far :) Sorry for making a mess out of this thread.
ORIGINAL POST
I try to let a child div connect to the righter outermost edge of the page. This div (yellow) is placed within a parent div (red) that fills only the center area of the page. Is this possible somehow?
Here's the HTML:
<div class="red">
<div class="yellow">
this div should extent to outermost right of entire page
</div>
</div>
Here's the CSS:
.red {
position:relative;
height:500px;
width:500px;
margin:0 auto;
background-color:#ff0000;
}
.yellow {
position:absolute;
height:200px;
width:100%; /* idk how to solve this */
background-color:#ffff00;
top:100px;
right:0px; /* this applies to div.red but should apply to the entire page somehow */
}
Here's the fiddle:
fiddle
Kind regards,
Steven
EDIT: here's the photoshopped result:link
Use below css. let me know is it the one you are looking.
.red{
position:relative;
height:500px;
width:500px;
margin:0 auto;
background-color:#ff0000;
}
.yellow{
position:absolute;
height:200px;
width:400px; /* idk how to solve this */
background-color:#ffff00;
top:100px;
right:0px;
left:0px;
/* this applies to div.red but should apply to the entire page somehow */
margin:auto;
}
Do you need this?
.red {
height: 500px;
width: 500px;
margin: 0 auto;
background-color: #ff0000;
}
.yellow {
position: absolute;
height: 200px;
background-color: #ffff00;
top: 100px;
left: auto;
right: 0px;
}
UPD: I'm not sure that you can find only-CSS solution. So, you can add some jQuery or pure JS.
I am facing problem while centering a div of fixed width & height and placing two divs side by side inside it. What i want to achieve, at later point of time, is the slide to left effect on the second div (on top of first div) based on some event. Below is what i tried:
HTML:
<div id="center">
<div id="firstel"></div>
<div id="secondel"></div>
</div>
CSS:
#center{
position:absolute;
border:1px solid black;
width:200px;
height:100px;
overflow:hidden;
top:50%;
left:50%;
}
#firstel{
background-color:red;
}
#secondel{
background-color:blue;
}
#firstel,#secondel{
position:relative;
width:200px;
height:100px;
display:inline-block;
float:left;
}
JSFIDDLE: link
Any help is appreciated!
#center{
position:absolute;
border:1px solid black;
width:100%; //change this
overflow:hidden;
top:50%;
left:50%;
}
Demo here
#center and #firstel,#secondel ID's were of same width(200px), If you need to show side by side eitherof the ids values have to be changed
You can try like this: Demo
#firstel,#secondel{
width:50%; /* changed value in % or you can use 100px too as per your need */
height:100px;
display:inline-block;
float:left;
}
if u want the two divs side by side
change the widths of the divs
change the divs width that shoild be less than the parent div width
#firstel,#secondel{
position:relative;
width:100px;
height:100px;
display:inline-block;
float:left;
}
I am trying to arrange 3 divs side by using float:left, there is fixed height for two div's child1 and child3, but there is no height for child2, i need the child2 div height as the same height of the container div.
<div id="container">
<div id="child1">Child1</div>
<div id="child2">Child2</div>
<div id="child3">Child3</div>
<div>
#container
{
margin-left: 3px;
padding: 10px 0px;
position: relative;
display: block;
width: 500px;
background:yellow;
overflow:hidden;
}
#child1
{
float:left;
width:100px;
height:300px;
background:green;
}
#child2
{
float:left;
width:100px;
height:auto;
background:cyan;
}
#child3
{
float:left;
width:100px;
height:400px;
background:red;
}
here is the fiddle: http://jsfiddle.net/2ksxL/2/
You can change the #container {display: flex;}, but that does not have awesome support in IE (http://caniuse.com/flexbox). If you need more support you will have to come up with a jQuery solution that can find the height of the container and give it to #child2.
Since you haven't define any height for container, the container height is going to depend on the max height that's been defined to the #childX. In this case, #child3. So what you can do is compare the height of both #chidl1 and #child3 and set the height of #child2 to the max one via this little jQuery.
var highestCol = Math.max($('#child1').height(),$('#child3').height());
$('#child2').height(highestCol);
FIDDLE
I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).
(See Example for a visual)
The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.
And the Following CSS results in a gap between the content and the footer.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?
Thank you!
FIDDLE: http://jsfiddle.net/3R6TZ/2/
Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/
CSS
html, body {
height: 100%;
margin:0;
}
body {
background:yellow;
}
#wrapper {
position: relative;
min-height: 100%;
vertical-align:bottom;
margin:0 auto;
height:100%;
}
#header {
width: 100%;
height: 150px;
background:blue;
position:absolute;
left:0;
top:0;
}
#content {
background:pink;
width:400px;
margin:0 auto -30px;
min-height:100%;
height:auto !important;
height:100%;
}
#content-spacer-top {
height:150px;
}
#content-spacer-bottom {
height:30px;
}
#divFooter {
width:100%;
height: 30px;
background:blue;
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-spacer-top"></div>
<div id="content-inner">
**Content Goes Here**
</div>
<div id="content-spacer-bottom"></div>
</div>
<div id="divFooter">Footer</div>
</div>
UPDATE
The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.
In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.
EDIT
Added a fix and tested down to IE7
UPDATE 2
Alternate method using :before and :after pseudo-elements instead of the spacer divs:
http://jsfiddle.net/gBr58/1/
Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean
UPDATE 3 (Sorry for so many updates)
Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...
I think you need position: fixed on the footer:
footer {
width: 100%;
height: 30px;
position:fixed;
bottom:0;
}
OK. Here's the deal. I've read quite a few articles on this site and others about vertical centering but they all seem to refer to centering a single div and I haven't been able to apply it correctly to a more complex layout. I'm working on a site which has a header, navigation bar, content area, sidebar, and footer. A mockup of the design can be seen here: mockup
I've got all the divs fitting together nicely thanks to the use of the 0px text trick in the container div and the content & sidebar sit next to each other using display:inline-block. the header, navbar, and footer are horizontally centered using margin-left:auto & margin-right:auto. together this nicely renders the whole site horizontally centered but I can't figure out how to apply vertical centering to the whole site without breaking the design. This is not a fluid layout, all divs have fixed pixel sizes that the content fits into very nicely. It seems that there should be some way to use absolute or relative positioning and percentages to center everything vertically but I can't figure out how to do it. The code for the mockup is attached. Thanks!
<style type="text/css">
<!--
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
#header {
width:650px;
height:87px;
z-index:1;
background-color:#C90;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
font-size:12px;
}
#navbar {
width:650px;
height:32px;
z-index:2;
background-color:#0FF;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
#content {
width:500px;
height:265px;
z-index:3;
background-color:#33F;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#sidebar {
width:150px;
height:265px;
z-index:4;
background-color:#999;
display:inline-block;
vertical-align:middle;
font-size:12px;
}
#footer {
width:650px;
height:58px;
z-index:5;
background-color:#F69;
vertical-align:middle;
font-size:12px;
margin-left:auto;
margin-right:auto;
}
-->
</style>
</head>
<body>
<div class="container">
<div id="header">Header</div>
<div id="navbar">Navbar</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div></div>
</body>
</html>
You need to put a container around the whole part that you want vertically centered, and you need to know the height. Then you give it an absolute position that is 50% from the top and give it a margin-top of minus half the height.
So if your container is 400px high you would use the following css:
#container {
position: absolute;
top: 50%;
margin-top: -200px;
}
In your case your 'container' is 442px high, so change this css:
DIV.container {
position:relative;
height:100%;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
To this:
DIV.container {
position:absolute;
top:50%;
margin-top:-221px;
width:100%;
display:table;
text-align:center;
font-size:0px;
overflow:hidden;
}
Your stylesheet can be much cleaner/smaller.
See this demo fiddle.
And if you don't want a scroll bar when the browser window becomes small, then add overflow: hidden to the body, see this fiddle. But that's NOT a tip in the light of usability.
And to make it dynamic, use Javascript/jQuery to find the height of the window, and adjust DIV.container's margin-top as shown by Kokos.