I need to center the divs that float: left in responsive layout. I mean to center them in small layout, even if they moves to new line. http://jsfiddle.net/allegrissimo123/njpCe/
<div class="buttonwrapper">
<div class="buttons">
Button 1
Button 2
Button 3
Button 4
</div>
</div>
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px;
}
.buttons
{
text-align:center;
margin: 0 auto;
position:relative;
float:left;
left:-50%;
}
.buttonwrapper
{
position:relative;
float:left;
left:50%;
}
Made a little change to your code .
USe
.buttons a, .buttons button {
display:inline-block;
margin:auto;
}
check this fiddle: Fiddle
Related
Why is the two boxes to the right side, and not centered align?
fiddle: http://jsfiddle.net/gh76q/1/
I, tried change the position of box 2 to relative, it will do the trick but the box moves when hovering the box 1.
HTML:
<div align="center" id="top-link">
<div class="switch">
<div class="avg_display">Box 1</div>
<div class="avg_hide">Box1 info<br></div></div>
<div class="link-block">Box2</div>
</div>
CSS:
#top-link {padding-bottom:40px;}
.switch {display:inline-block;}
.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
position:absolute;
color:#555;
}
.link-block a {
text-align: center;
vertical-align: middle;
line-height: 25px;
color:#555;
}
.link-block:hover {
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
margin-top:10px;
margin-right:20px;
}
.link-block:hover a{
color:#fff;
}
.avg_display {
display:inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}
.avg_hide {
display:none;
padding: 20px 20px 20px 20px;
background-color:#1396d0;
border:2px solid #1396d0;
color:#fff;
border-radius: 5px;
height:250px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
}
.avg_display a {
text-align: center;
vertical-align: middle;
line-height: 25px;
color:#555;
}
Fiddle:
Remove position:absolute from the box2 class.
.link-block {
display: inline-block;
padding: 20px 20px 20px 20px;
border: 2px solid #e7e7e7;
border-radius: 5px;
height:25px;
width:200px;
text-align:center;
margin-top:10px;
margin-right:20px;
/*position:absolute;*/
vertical-align:top; /* Keep the box always on top */
color:#555;
}
DEMO
I have 4 DIVs positioned like viewed in image. Div1 and Div 2 And Div 3 are placed inside the Footer Div. The contents of 3 Divs are dynamic and I don't know what height they need. How can I set these 3 divs height to a same value?
I've tried different solutions like setting top and button to 0px as here mentioned:
Make div 100% height of browser window
This is what I currently have:
This is my HTML Layout:
<div class="About">
<div class="RightAbout">
</div>
<div class="CenterAbout">
</div>
<div class="LeftAbout">
</div>
</div>
This is my CSS Classes:
.About
{
padding:0px;
background-color:#757575;
border:none;
min-height:250px;
color:White;
font-size:12pt;
}
.RightAbout
{
display:inline-block;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
margin:0px 0px 0px 0px;
padding:0px 5px 0px 5px;
vertical-align:top;
background-color:blue;
}
.CenterAbout
{
display:inline-block;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
margin:30px 0px 30px 0px;
padding:0px 5px 0px 5px;
vertical-align:top;
}
.LeftAbout {
display: inline-block;
min-height:100%;
border: none;
padding: 0px 5px 0px 5px;
margin: 30px 0px 30px 0px;
vertical-align: top;
}
Like this
demo
css
body, html {
height: 100%;
}
.About
{
padding:0px;
background-color:#757575;
border:none;
min-height:250px;
color:White;
font-size:12pt;
display:table;
}
.RightAbout
{
display:table-cell;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
margin:0px 0px 0px 0px;
padding:0px 5px 0px 5px;
vertical-align:top;
background-color:blue;
}
.CenterAbout
{
display:table-cell;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
vertical-align:top;
background-color:#757575;
}
.LeftAbout {
display:table-cell;
min-height:100%;
border: none;
width:290px;
vertical-align: top;
background-color:#757575;
}
You seem to have the same problem as this individual:
How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?
This should solve your problem and help with similar problems in the future:
Equal Height Columns with Cross-Browser CSS
I have the following CSS for some DIVs,
#wrapper {
width:960px;
border:1px solid red;
overflow:hidden;
}
#maintitle {
width:600px;
height:50px;
float:left;
border:1px solid #333;
}
#sidebar {
clear:both;
float:left;
width:100px;
height:200px;
border:1px solid #ccc;
}
#rightSidebar {
width:100px;
height:200px;
float:right;
border:1px solid #CCC;
}
I would think the #rightSidebar div would float to the very top right corner of the #wrapper div, however, it's staying below the #maintitle DIV.
The #maintitle DIV is floating to the left, would it then allow the #rightsidebar div to float to the very top right corner?
Here it is in action, http://jsfiddle.net/BdpU7/.
Is this what you had in mind? http://jsfiddle.net/BdpU7/1/
The #rightSidebar needs to go before #sidebar in the HTML, and then #sidebar has to have the clear:
#wrapper {
width:960px;
border:1px solid red;
overflow:hidden;
}
#maintitle {
width:600px;
height:50px;
float:left;
border:1px solid #333;
}
#sidebar {
clear:left;
float:left;
width:100px;
height:200px;
border:1px solid #ccc;
}
#rightSidebar {
width:100px;
height:200px;
float:right;
border:1px solid green;
}
<div id="wrapper">
<div id="maintitle"></div>
<div id="rightSidebar"></div>
<div id="sidebar"></div>
</div>
The following creates a table like structure.
As you will see in the FIDDLE the height of the first <li> is not counted. Why is this.
http://jsfiddle.net/CaqCg/5/
.ui .form {
display:block; position:relative; clear:both;
}
.ui .padd {
padding:20px; display:block;
}
.ui .form.boxstyle .text {
padding:0 5px 10px 5px;
}
.ui .form.boxstyle ul {
border:1px solid #DDD; border-radius:10px; background:#FAFAFA; margin:10px 0 10px 0; box-shadow:inset 0 0 10px rgba(100,100,100,0.1); display:block; position:relative; clear:both;
}
.ui .form.boxstyle li {
border-bottom:1px solid #DDD; display:block; clear:both; position:relative;
}
.ui .form.boxstyle li span:first-child {
float:left; display:block; width:-webkit-calc(35% - 20px); width:-moz-calc(35% - 20px); width:calc(35% - 20px); padding:12px 10px 9px 10px; font-size:12px; line-height:16px; height:16px; text-indent:6px; vertical-align:top;
}
.ui .form.boxstyle li span:nth-child(2) {
float:right; display:block; width:-webkit-calc(65% - 34px); width:-moz-calc(65% - 34px); width:calc(65% - 34px); padding:11px 10px 9px 10px; font-size:12px; line-height:16px; min-height:16px; border:solid #DDD; border-width:0 1px 0 1px; background:#FFF;
}
.ui .form.boxstyle li:last-child {
border-bottom:0px;
}
.ui .form.boxstyle label {
width:100%; font-size:12px; color:#555; text-shadow:0 1px #FFF;
}
.ui .form.boxstyle input, .ui .form.boxstyle textarea {
height:16px; display:block; color:#555; border:none; box-shadow:none; outline:none; line-height:16px; margin:0; width:100%; display:block; appearance:normal; padding:0;
}
Add overflow: hidden to the ul: http://jsfiddle.net/CaqCg/6/
The ul is collapsing because of the floated elements inside it.
Update: added overflow: hidden to the lis too, since they were also collapsing: http://jsfiddle.net/CaqCg/13/
I want something like this, click here.
This is a simple code in my HTML:
#mainContent {
margin:0;
width:100%;
height:600px;
padding: 0 0 30px 0;
}
#mainContent #sidebar { /* sidebar inside #mainContent */
float:left;
width:220px;
height:560px;
margin:10px 10px 40px 10px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
}
#mainContent #featContent {
height:560px;
margin:10px 10px 40px 260px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
overflow:auto;
}
<div id="mainContent">
<div id="sidebar"></div>
<div id="featContent"></div>
</div>
The problem is one of the divs are improperly placed .The #featContent div is going out of its parent #mainContent div for reason I don't understand. Check out this in jsFiddle here. The margin of #featContent goes out of the #mainContent bounds.
Demo
Add the following style to the #mainContent
#mainContent {
overflow:hidden;
}
Live demo
Add padding to parent div
#mainContent {
margin:0;
width:100%;
height:auto;
padding:10px 5px 40px 5px; background-color:red
}
#mainContent #sidebar { /* sidebar inside #mainContent */
float:left;
width:220px;
height:560px;
margin:10px 10px 40px 10px;
background-color:#CCCCCC;
}
#mainContent #featContent {
height:560px;
margin:10px 10px 40px 260px;
background-color:#CCCCCC;
overflow:auto;
}
Demo hrer http://jsfiddle.net/j4C7T/