<section id="main-content">
<div class="language-box html">HTML</div>
<div class="language-box javascript">JAVACRIPT</div>
<div class="language-box css">CSS</div>
<div class="language-box php">PHP</div>
<div class="clear"></div>
</section>
I'm trying to make this 4 box's become centralized and side by side.
I'm using this code, but it's not working as i hope:
#main-content {
margin: 0 auto;
}
.language-box {
width: 279px;
height: 400px;
background-color: white;
float: left;
margin: 0 auto;
}
http://i.imgur.com/V2DPlRa.png
You could remove float, display items as inline-block and set text-align: center to the container.
#main-content {
margin: 0 auto;
text-align: center;
width: 100%;
}
.language-box {
width: 80px;
border: 1px solid #000000;
height: 400px;
background-color: white;
/* float: left;
margin: 0 auto; */
display: inline-block;
}
Fiddle: http://jsfiddle.net/9k2ae5vv/
You need to clear after float elements:
#main-content {overflow: hidden}
you must set width for your wrapper, and everything will be fine.
#main-content {
margin: 0 auto;
width: calc(4 * 279px);
}
look working example
Related
Basically, I am trying to put two circles next to each other (instead of on top)inside of a container.
However, there's a space between them and I want to get rid of it. How can I put two (or more) circles together?
https://jsfiddle.net/hLsu9qj0/
<div class="container">
<div class="circle">
circle 1
</div>
<div class="circle">
circle 2
</div>
</div>
css:
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
margin: 0 auto;
display: inline;
}
thanks everyone for your help!!!
It looks like all you're missing in your CSS is a float: left on the .container .circle { rule
UPDATED
One potential solution to the centering question (from comments) might be to make the .container div the size of the circles and center that
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
width: 100px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
float: left;
}
Or, as someone else suggested use display: inline-block and then set text-align: center on the .container
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
text-align: center;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 auto;
}
Try adding float to .container .circle
float:left
check this https://jsfiddle.net/hLsu9qj0/2/
Use display: inline-block; instead of display: block;.
And give margin: 0 5px; to .container .circle to give space between.
You can use float:left also.
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 5px;
}
Updated Fiddle
UPDATED : JsFiddle
OPTIONAL :
This is for overlapping of two circle.Take a look in JsFiddle
Second Way : Link
HTML:
<div class="container">
<div class="circle">circle 1</div>
<div class="circle">circle 2</div>
</div>
CSS:
.container {
position: relative;
width: 95%;
margin: 0 auto;
line-height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
margin-left:5px;
float:left;
}
Use float left in circle div
.container .circle {float:left;}
checkit out this http://jsfiddle.net/hLsu9qj0/9/
You should simply add the float:left; to the circle class. To guarantee also a good alignment, I suggest fixing the width and height of the container and set: height:100% to the circle, check the link:
//jsfiddle.net/hLsu9qj0/
you can use inside the container 2 div
<div class="container">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
put your code inside the 2 div column it defiantly works bootstrap but you need bootstrap css link inside your .html page
If you want to center them, change width of .container to .container {
clear: both;
overflow: hidden;
width: 23%;}
I apologize if this is a basic question, but i'm having trouble centering four divs. All four green divs have a float left, then there is a wrapper div (blue). I want to center the four divs but have them aligned like this (On a larger resolution they are not displayed along the middle). So that when reducing the screen size the divs will float underneath each other.
http://jsfiddle.net/qvu712tj/
#blog-wrapper {
background-color: blue;
width: 100%;
height: 700px;
margin-left: auto;
margin-right: auto;
align: center;
}
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px;
float: left;
padding: 5px;
}
<div id="blog-wrapper">
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
<div class="blog-section"></div>
</div>
I hope this makes sense please could anyone help?
Try this:
.blog-section {
background-color: green;
height: 200px;
width: 45%;
margin: 10px 2.5%;
float: left;
/* padding: 5px; */
}
use percentage instead of px for margin and padding
.blog-section{
background-color: green;
height: 200px;
width: 45%;
margin: 1%;
float: left;
padding: 1.5%;
}
Try this
.blog-section{
background-color: green;
height: 200px;
width: 48%;
margin: 12px 1%;
float: left;
}
Hello I am a new web developer. I have a simple problem.
I am trying two column site in a div (.container width960px) one is float: left(width:300px) but when another using float: right(width:650px ) . But when I am using float right rightsidebar did not appear in container. Pleasr help me proper use on float: left or right.
.container {
background: none repeat scroll 0 0 #000;
margin: 0 auto;
width: 960px;
}
.leftsidebar {
width: 200px;
float:left
}
.rightsidebar {
float: left;
width: 200px;
color: #fff;
width: 400px;
}
The result you want, is simple. There shouldn't be any problem, check this sample based on yours:
HTML
<div class="container">
<div class="leftsidebar">
Right Sidebar
</div>
<div class="rightsidebar">
Right Sidebar
</div>
<div class="clear"></div>
</div>
CSS
.container {
background: none repeat scroll 0 0 #000;
margin: 0 auto;
width: 960px;
}
.leftsidebar {
width: 200px;
float: left;
background: yellow;
}
.rightsidebar {
float: left;
width: 760px;
background: green;
}
.clear {
clear: both;
}
jsFiddle Demo.
I have two fixed sized div and I want to keep them horizontally middle even if I re-size the screen. Even if I remove one div for low screen, I want to keep other in the middle.
Here is the code I have tried...
Fiddle
<div id="wrapper1">
<div id="one">1</div>
<div id="two">2</div>
</div>
CSS from here...
#wrapper1 {
width: 100%;
height: 90px;
margin: 0 auto;
}
#wrapper1 #one {
width: 200px;
height: 90px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#wrapper1 #two {
width: 100px;
height: 90px;
margin-left: 10px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#media screen and (max-width: 400px) {
#wrapper1 #two {
display: none;
}
}
Demo
text-align:center into your parent div will make all the child div's will come in the center.
css
#wrapper1 {
width: 100%;
height: 90px;
text-align: center; /* add just this to make child elements center in parent div */
}
just add the mentioned below css :-
#wrapper1 {
display: table;
height: 90px;
margin: 0 auto;
text-align: center;
width: 100%;
}
through display:table and text-align:center into your parent div all the child div's will come in the center either its 1 or more than 1 div....
DEMO
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/