I need to center align the yellow boxes (no matter how many are they) inside the blue container. The yellow boxes can go down on the 2nd (or 3rd row, etc) if they are many but they should remain center aligned inside the blue container. Any ideas how to do it?
HTML
<div id="container">test
<br />
<div class="box">foo bar</div>
<div class="box">foo bar</div>
<div class="box">foo bar</div>
<div class="box">foo bar</div>
</div>
CSS
#container {
background:lightblue;
width:100%;
}
.box {
width:10em;
float:left;
background:yellow;
margin:1em;
}
http://jsfiddle.net/585Eq/
Remove the float on the divs and replace it with display:inline-block. Add a text-align:center rule to the container div:
#container {
background:lightblue;
width:100%;
text-align:center;
}
.box {
width:10em;
display:inline-block;
background:yellow;
margin:1em;
}
jsFiddle example
Change your css to following:
#container { background:lightblue; width:100%;text-align:center }
.box { width:10em; display:inline-block; background:yellow; }
I dont know if you use auto margin will work.. but i recommend you to deal with it as a menu. It will work just like a div. Im showing you this way because thats the way im sure it works.
<ul id="container">test
<br />
<li class="box">foo bar</li>
<li class="box">foo bar</li>
<li class="box">foo bar</li>
<li class="box">foo bar</li>
</ul>
the CSS:
#container {
text-align: center;
height: <-- Specify a fixed height.
}
#container li {
display: inline-block;
margin-right: 30px; <-- This will the the margin between the items
list-style-type: none;
}
Thats what you want? Or you want that all the yellow boxes be automatically adjusted inside the blue div?
You may try with display:inline-block;
Change your CSS like:-
#container {background:lightblue;width:100%; text-align:center;}
.box {width:10em; display:inline-block; background:yellow; margin:1em;
}
DEMO JSFIDDLE
Related
I am trying to add two images (ul,li) at the end of a DIV. I use position ABSOLUTE, RELATIVE and left:0, bottom:0, and it does it, but it doesnt remain on the div.
The images appear in the "MainDiv", and not in "container".
The css:
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:600px;
}
#container{
width:980px;
height:600px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
}
The Html:
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1">Example1</li>
<li id="image2">Example2</li>
</ul>
</div>
</div>
The absolutely positioned element is positioned with respect to the corresponding edges of it's parent... from the look of it your container doesn't have any height set...
When you add a height to container it does move your <ul> to the bottom of the div. In fact, it is always at the bottom of the div, but because the height of the div is 0 it doesn't look like it is at the bottom of it.
http://jsfiddle.net/s5aE3/
#container{
width:980px;
margin:0 auto;
position:relative;
height: 800px;
}
The list is correctly positioned at the bottom of the container div, but there is nothing that gives the container div any height. As the height of the container div becomes zero, the list is placed with the bottom where the container div is.
To put the list inside the container div, you need to give the container div a height. Either by specifying a height style, or putting something inside it that isn't absolutely positioned or floating.
Edit:
With your updated code that has a height for the container div, the list is placed at the bottom.
Try setting the vertical align to bottom.
<style>
#MainDiv{
background:url(../img/background.jpg) no-repeat;
background-size:cover;
}
#container{
width:980px;
margin:0 auto;
position:relative;
}
#list{
width:260px;
height:40px;
position:absolute;
left:0;
bottom:0;
}
#list li{
width:130px;
height:40px;
border:1px solid white;
vertical-align:bottom;
}
</style>
<body>
<div id="MainDiv">
<div id="container">
<ul id="list">
<li id="image1>Example1</li>
<li id="image2>Example2</li>
</ul>
</div>
</div>
Why my container is not background color red and ul is not inside div container ??
STYLE:
#container {
width:1000px
}
#categoryorder {
float:left;
width:500px;
margin:0 0 0 50px;
display:inline;
list-style-type:none
}
#categoryorder li {
color:#003366;
font-size:20px;
float:left;
width:196px;
background-color:#fcfcfc;
border: 2px solid #dddddd;
margin:0 50px 50px 0;
line-height:50px;
text-align:center;
display:inline;
cursor:move
}
HTML:
<div id="container" style="background-color: red;">
<ul id="categoryorder">
<li id="ID_1">1</li>
<li id="ID_2">2</li>
<li id="ID_3">3</li>
<li id="ID_4">4</li>
<li id="ID_5">5</li>
<li id="ID_6">6</li>
<li id="ID_7">7</li>
<li id="ID_8">8</li>
</ul>
</div>
Because you are floating all of the elements within, without clearing them. Create a clear class and then add an element at the bottom:
HTML
<div id="container" style="background-color: red;">
<ul id="categoryorder">
<li id="ID_1">1</li>
<li id="ID_2">2</li>
<li id="ID_3">3</li>
<li id="ID_4">4</li>
<li id="ID_5">5</li>
<li id="ID_6">6</li>
<li id="ID_7">7</li>
<li id="ID_8">8</li>
</ul>
<div class="clr"></div>
</div>
CSS
.clr{
clear:both;
font-size:0;
}
JSFiddle
When you float the children you essentially remove them from the flow of the document and the container element's height shrinks to nothing. Add overflow:auto; to your #container div to restore the behavior you seek.
#container {
width:1000px;
overflow:auto;
}
jsFiddle example
Note that this answer doesn't require any extra (non-semantic) divs to get the desired result.
You are floating your elements and need to add overflow: hidden to your PARENT container to restore the height. Use this and you wont need to add an extra div to your flow.
#container {
width:1000px; overflow: hidden;
}
http://jsfiddle.net/saUp7/1/
Change your float:left to display:inline-block;
Css:
#categoryorder {
width:500px;
margin:0 0 0 50px;
display:inline-block; /*from float:left; to display:inline-block; */
list-style-type:none;
}
DEMO
Just use display:inline-block instead (and add vertical-align: top for better look).
Float is designed for cutting block from flow, so it is normal behaviour for that: you have no no-floated blocks inside, so flow is near nothing.
Inline-blocks are in flow, so it will work.
And just one trick for inline-blocks: remember the spaces! If they are in source, there will be small margins within blocks, so just comment your indents
somethinganother
(look up to source)
I'm not sure if this question has been answered (I think it probably has), but how do you center this dynamic div?
(I want #two to align itself to the middle position of #one.)
Right now my jsFiddle does this: http://jsfiddle.net/sE8Sc/4/
HTML :
<div id="one">
</div>
<div id="two">
<a class="stuff">a</a>
<a class="stuff">b</a>
<a class="stuff">c</a>
</div>
CSS :
#one { width:100%; height:200px; background-color:#222; float:left; }
#two { text-align:center; float:left; }
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; float:left; }
I've tried margin:0 auto;, text-align:center; but still no dice. I'm not looking at declaring a defined margin like margin:0 41%; because if I wanted to add another <a class="stuff"> to the list it would get out of position...
Anyone? This is probably some simple positioning error that I can't figure out.
EDIT : I was looking around, and I saw this demo by Nivo Slider -- http://demo.dev7studios.com/nivo-slider/ -- how is it defining itself with a 960px width?
You'll need to wrap both #one and #two in a containing element. That should set the width. Then all you need to do is remove all the floats (on #one, #two and #two's children). JSFiddle
#wrapper { width:500px; }
#two { text-align:center;}
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; }
New markup.
<div id="wrapper">
<div id="one"></div>
<div id="two">
<a class="stuff">a</a>
<a class="stuff">b</a>
<a class="stuff">c</a>
</div>
</div>
Without the wrapper two would just be aligned to the center of your window (or a parent with a width).
You center a dynamic div by cimply giving it a display: table value
DEMO http://jsfiddle.net/kevinPHPkevin/sE8Sc/20/
#two {
text-align:center;
display: table;
margin: 0 auto;
}
I'm currently trying to code my own portfolio website and struggling to position three text boxes. On my website I would like to have the boxes positioned left, centre and right on the page all in a line.
I have tried different things such as putting each text box in a separate div and trying to position them but they only position below and not next door to each other putting the css rule inline. I have also tried putting the boxes as a list and trying to inline them.
Any ideas?
Try this
<div id="con">
<div class="float">Hello</div>
<div class="float">World</div>
</div>
And the css
.float { float:left; width:100px; height:100px; background:yellow; }
Check JSFiddle here
Maybe this
.foo
{
float: left;
width: 33%;
}
Your html is smth like this:
<div></div>
<div></div>
<div></div>
And the css:
div{width:30%;margin:1%;border:1px solid blue; float:left; height:100px;}
Here is an example:http://jsfiddle.net/795T4/.
have some html like this
<ul class="portfolio">
<li><input id="txtBox1" type="text"></li>
<li><input id="txtBox2" type="text"></li>
<li class="last"><input id="txtBox3" type="text"></li>
</ul>
and css along the lines of
.portfolio{
margin:10px auto;
width:1000px
}
.portfolio li{
float:left;
display:block;
width:330px;
height:200px;
background-color:#e4e4e4;
margin-right:15px
}
.portfolio .last{
margin-right:0
}
this is based on a fixed width site, and i'd use an Unordered List <ul> because semantically you have a list of 3 boxes.
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}