Why is the container with the background colour f0f0f0 not centering for me? I gave the parent element the css style of text-align: center but it seems to ignre it?
http://codepen.io/ELiHimself/pen/qOXVYJ
<body>
<header></header>
<section class="container">
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box" id="box3">box3</div>
</section>
</body>
sass
*
margin: 0
body
text-align: center
.container
max-width: 1170px
padding-top: 100px
background-color: #f0f0f0
header
height: 100px
background-color: red
.box
padding: 100px
border: 1px solid black
display: inline-block
section is a block level element. Apply:
.container {
...
margin: 0 auto;
}
to your container and it should work fine.
You need to set
.container {
margin-left: auto;
margin-right: auto;
width: /* your width */
}
This should to the trick
Related
I've two floated DIVs (two columns) which are nested in an "clear-float"-DIV, which itself is nested in an centered DIV ("wrapper" DIV).
<div id="content">
<div class="block2">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
The right column has min-width and max-width CSS option set. But the wrapper DIV, which has min-width and max-width also, is always expanded to max width.
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
}
.block {
overflow: hidden;
_overflow: visible;
_overflow-x: hidden;
_height: 0;
}
#slot_left {
width: 200px;
background: #ff0;
float: left;
position: relative;
}
#slot_right {
float: left;
background: #cc0;
min-width: 100px;
max-width: 150px;
position: relative;
}
What's the reason for that? I want the wrapper DIV to has minimum width required but to be centered on screen.
Here is an fiddle.
use display:inline-block
why this is happening?? div is by default block level element, so when you have given max-width, it will always obey it to occupy max area possible....
http://jsfiddle.net/sHB7g/3/
CSS
#content {
min-width: 300px;
min-height: 80px;
max-width: 350px;
margin: 0 auto;
background: #c00;
display:inline-block
}
.block {
display:inline-block;
overflow: hidden;
border:1px solid #000;
}
http://jsfiddle.net/sHB7g/1/
#content {
display: inline-block;
}
and then added a content wrapper
#contentwrapper {
text-align: center;
}
the html then is like this
<div id="contentwrapper">
<div id="content">
<div class="block">
<div id="slot_left">
CONTENT-LEFT
</div>
<div id="slot_right">
*CONTENT-RIGHT*
</div>
</div>
</div>
I'm trying to position clid divs in parent div but the height of parent div should be dynamic so it should either expand or shrink after child divs are positioned inside. How can I accomplish it? Childs should remain inside of parent all times.
Since I'm not designer at all I read "Learn CSS Positioning in Ten Steps" to learn a bit.
And this question "Make absolute positioned div expand parent div height".
Thanks
JSFIDDLE
CSS
#header
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #aa0000;
}
#body
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #ff0000;
}
#footer
{
margin: 0 auto;
border: 1px solid #000000;
width: 500px;
background: #dd0000;
}
#section_one
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 10px;
}
#section_two
{
position: relative;
width: 100px;
height: 100px;
background: #EEEEEE;
top: 10px;
left: 150px;
}
HTML
<div id="header">HEARDER</div>
<div id="body">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
<div id="footer">FOOTER</div>
You could use float:left and then postion the sections with margin
FIDDLE
Markup
<div id="header">HEARDER</div>
<div id="body">
<div class="section one">SECTION ONE</div>
<div class="section two">SECTION TWO</div>
<div class="section three">SECTION THREE</div>
<div class="section four">SECTION FOUR</div>
</div>
<div id="footer">FOOTER</div>
CSS
.section
{
width: 100px;
height: 100px;
background: #EEEEEE;
float:left;
}
.two
{
margin: 20px 0 0 10px;
}
.three
{
margin: 80px 0 0 50px;
}
.four
{
margin: 220px 0 0 -200px;
}
if it's just a matter of aligning those boxes, use margin&padding and inline-block instead of absolute positioning.
like this: http://jsfiddle.net/avrahamcool/JVh8e/1/
HTML:
<div id="cover">
<div id="section_one">SECTION ONE</div>
<div id="section_two">SECTION TWO</div>
</div>
CSS
#cover
{
margin: 0 auto;
padding: 5px;
width: 500px;
background-color: #000000;
}
#section_one, #section_two
{
display: inline-block;
width: 100px;
height: 100px;
margin: 5px;
background-color: #EEEEEE;
}
as you already read in the link you provided, an absolute element is removed from the flow, so unless you're willing to write a script that finds the necessary height of the cover, its impossible.
also: use background-color instead of background (if you apply only the color)
Update
this is the new fiddle (after your editing):
http://jsfiddle.net/avrahamcool/JVh8e/5/
Update 2:
check out this working example with script.
http://jsfiddle.net/avrahamcool/JVh8e/6/
How come when I float #main div to the right, the right border doesn't line up with the right border of the header div?
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
#header {
width: 960px;
height: 70px;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
#leftcol {
width: 250px;
height: 500px;
border: 1px solid black;
float: left;
margin-right: 20px;
}
#main {
width: 686px;
height: 500px;
border: 1px solid black;
float:right;
}
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="leftcol">
</div>
<div id="main">
</div>
</div><!--end wrapper-->
</body>
</html>
As #alfonso pointed out, borders are increasing the actual size of your divs.
It's good practice to use box-sizing: border-box on all the elements with borders, so that the borders go inside. Alignment becomes MUCH easier.
You forgot to consider the border width of the header.
In total, your header's width is 960px + 2px from the border = 962px, while the main content plus the sidebar have a width of 960px.
If you set the header's width to 958px, both divs align.
Here's a reference to the CSS box model to help you do the math: CSS box model
I'm intentionally pushing my link text below their containing <div class="box">
The problem is that the wrapper doesn't include the link text. How do I get it to encompass said text?
Here's the fiddle.
<div id="wrapper">
<div class="box lowest">Home</div>
<div class="box medium">About</div>
<div class="box">Products</div>
<div class="box medium">Services</div>
<div class="box lowest">Contact</div>
</div>
#wrapper{
width: 600px;
margin: 0 auto;
text-align: center;
border: solid 1px green;
position:relative;
white-space: nowrap;
letter-spacing: 15px;
}
.box a{
padding-top: 105px;
display: block;
}
.box{
width:75px;
height: 100px;
background-color:red;
border: solid 1px black;
display: inline-block;
vertical-align: top;
letter-spacing: normal;
}
.lowest{
margin-top:50px;
}
.medium{
margin-top:25px;
}
Screenshot
To #wrapper, add:
padding-bottom: 30px;
The problem here is that you've already set a specfic height to your .box div and pushing your anchor tag by a padding of 105px. This increases the size of your div, height is set fixed at 100px, the wrapper still thinks your div is 100px high.
Either set the appropirate height to the box div (height of the div with the red bg plus the padding and the height of the anchor tag) or use simply use min-height instead of height.
I'm trying to put two blocks into one fixed-height block to create the following layout:
------------------------
UL (initial height=0),
grows on element add until maximum height reached
scroll should be added after max height is reached
------------------------
DIV (initial height=100% of parent)
decreases until min height is reached
------------------------
HTML part of the layout:
<div style="height:100px">
<ul style="max-height:70px;height:auto;overflow:auto"></ul>
<div style="min-height:30px;height:auto">
<span>TEST CONTENT</span>
</div>
</div>
You really can't do this cleanly with just CSS. I'd suggest using a bit of jQuery for this where you just query the height of both at any given time, figure out which is taller, and then set the other element to match
I'm not sure that the DIV's properties are entirely clear. Note, this is not an answer (yet), just too long to put into a comment.
<div id="container">
<div id="list">
<ul></ul>
</div>
<div id="content">
<span>TEST CONTENT</span>
</div>
</div>
#container {
height: 100px;
background: grey;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content {
min-height: 30px;
height: auto;
background: #fdf;
}
// For testing
setInterval(function(){
$('ul').append('<li>Test</li>');
},3000);
http://jsfiddle.net/V8yuN/
Now, if you want the DIV#content to at first take up the entire height, but then shrink as the DIV#list UL grows, what is it you're trying to accomplish with DIV#content? Note, I put the UL within a DIV.
Now, the above fiddle demonstrates in a way what you're describing (the DIV#content gets pushed to the bottom). The question I have is, what does the height of the DIV#content matter in your design?
EDIT
Note, if you make the #container overflow: hidden and make the #content's height: 100%, it would appear as if the #container is shrinking.
#container {
height: 100px;
background: grey;
overflow: hidden;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content {
height: 100%;
background: #fdf;
}
http://jsfiddle.net/V8yuN/2
I have no idea, though, if that would cause your design to break, if the #content's actual content needs to display (for instance, if it is changed dynamically).
EDIT 2
The following accomplishes everything but the vertical-align of the #content text:
HTML
<div id="container">
<div id="push">
<div id="list">
<ul></ul>
</div>
<div id="content">
<div class="border-top"></div>
<div id="content-inner">
<span>TEST CONTENT</span>
</div>
</div>
</div>
<div class="border-bottom"></div>
</div>
CSS
#container {
height: 100px;
background: grey;
}
#push {
height: 95px;
overflow: hidden;
}
#list {
max-height: 70px;
overflow: auto;
background: #ddf;
}
#content-inner {
min-height: 100px;
background: #dfd;
margin: 0;
border-left: 5px solid #fdf;
border-right: 5px solid #fdf;
}
.border-top {
background: #fdf;
border-radius: 5px 5px 0 0;
height: 5px;
}
.border-bottom {
background: #fdf;
border-radius: 0 0 5px 5px;
height: 5px;
}
http://jsfiddle.net/V8yuN/6/
Let's say your html looks like this:
<div id="wrap">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
then your CSS could look like this, with #wrap height set, and a min-height for the bottom.
Mind the height 100% !important.
#wrap{
height: 400px;
background: #ccc;
}
#top{
//height: 200px; for testing
background: #f0f;
}
#bottom{
height: 100% !important;
min-height: 200px;
overflow: scroll;
background: #000;
}
is that kind of what you're searching for?
Would help though if you could post the stuff you've already done.