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;
}
Related
I have two containers, one has a width of 30% and the other has a width of 70% however they are not inline, instead one moves lower and by passes the other container as seen in the screenshot below how can i fix this?
main {
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
width: 30%;
}
Here is the Screenshot
http://prntscr.com/jdsy9b
Thanks
Try giving .main box-sizing: border-box;
.main {
box-sizing: border-box;
background-color: #f2f2f2;
padding: 10px;
float: right;
width: 70%;
}
This way you tell the browser to account for padding, you can read more about it in the docs.
The padding actually increases the box width and height
Here i removed the padding and added some height just to see the boxes.
.main {
background-color: #f2f2f2;
height:100px;
float: right;
width: 70%;
}
.aside {
text-align: center;
background-color: #c4c4c4;
overflow: hidden;
float: left;
height:100px;
width: 30%;
}
<div class="main"></div>
<div class="aside"> </div>
I'm having problems centering an image between two float-aligned pictures.
I can't add margin-left to the image in the middle. I would like it to stay centered on resizing.
My code:
#skjirt {
display: inline;
margin-left: auto;
margin-right: auto;
float: flex;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt1 {
display: inline;
float: left;
margin-left: 20px;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
}
#skjirt2 {
display: inline;
float: right;
height: 400px;
width: 400px;
border: 3px solid #662C49;
margin-top: 20px;
margin-right: 20px;
}
#imageWrap {
width: 100%;
height: auto;
margin-top: 100px;
}
If you want to make the image blocks display in the middle then instead of aligning them using float, just center them by applying the text-align:center to the #imageWrap container. Also change your display:inline to display:inline-block so that the img or any other element inside the boxes conform and adjust to the parent width and height.
Below is a sample code using your classes and I modified it with the suggested solution.
P.S. The suggested solution also makes the boxes to be responsive. :)
https://codepen.io/Nasir_T/pen/wqjKoa
I have an div container namend "content". This container got a width of 500px;.
Inside this div are two other divs. One div is called "right", with fixed width of 300px;. The other container ("left") should fill the rest width. Now I can give him a width of 200px, but when I resize the window the width does not change of the "left" container. I want that only the width of the second container "left" change, maybe with a % width?
And when I resize the window it should look like this:
Here is the code:
*{
margin: 0px;
padding: 0px;
}
.content{
width: 500px;
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right{
float: right;
width: 50%;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
JFiddle
You should Change Left Width size To 60%
.left{float: left;width: 60%;height: 20px;background-color: blue;}
.right{float: right; width: 40%;height: 20px; background-color: red;}
I think, this will be the best answer for you. please check the given below code snippet.
*{
margin: 0px;
padding: 0px;
}
.content{
width: 100%;
}
.left{
float: left;
width: 300px;
height: 100px;
background-color: blue;
}
.right{
float: right;
width: calc(100% - 300px);width: -webkit-calc(100% - 300px);width: -moz-calc(100% - 300px);
height: 100px;
background-color: red;
}
.clearBoth{
clear: both;
}
<div class="content">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearBoth"></div>
</div>
You want something like this ? You have to resize the window to see the change.
I use calc() function in CSS :
.right{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-left: 10px;
background-color: red;
}
I also use a fluid width for the main container.
See this fiddle
http://jsfiddle.net/7XD8s/300/
.left {
float: left;
width: 300px;
height: 20px;
background-color: blue;
}
.right {
display: block;
margin-left: 300px;
height: 20px;
background-color: red;
}
No need of calc
http://jsfiddle.net/7XD8s/303/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
padding: 5px;
}
.left{
float: left;
width: 300px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
overflow: hidden;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
Following code will keep the width of right container fixed at 300px. Left container will occupy rest of the space with 10px margin on its right side.
Please note, total width of content container is 500px.
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.content{
border: 1px solid black;
width: 500px;
padding: 5px;
}
.left{
float: left;
width: calc(100% - 310px);
height: 20px;
margin-right: 10px;
background-color: blue;
}
.right{
float: right;
margin: 0px;
width: 300px;
height: 20px;
background-color: red;
}
.clearBoth{
clear: both;
}
<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
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/