I am trying to get three columns on one line. It worked until I added some padding to the divs. I am using percentages for making it kinda responsive. The below is the CSS:
.contentLine .column {
float: left;
margin: 0;
width: 31%;
margin-right: 1%;
padding: 1%;
position: inherit;
}
.contentLine .last {
margin-right: 0;
}
Here is my fiddle
Did I make a mistake with the percentages?
Demo HERE
Use margin-right:.5%;
.contentLine .column {
float: left;
margin: 0;
width: 31%;
margin-right: .5%;
padding: 1%;
position: inherit;
}
and change last column div like this. because you are using class attribute two times and you can use class attribute only one time in a single tag.
Use
<div class="column last">
not<div class="column" class="last"> it is worng.
Reduce the width of your columns. With all the percentages and extra space added in, it all adds to over 100% which is why the third column will always be on the next line. Instead of 31%, try 30%.
Reduce the width of .column to 30%.
It currently goes to next line because, there are 3 boxes with width 31% (total 93%). They have padding (right and left) of 1% (so that totals upto 6%) and you have margin-right of 1% (which totals to 3%) and all together exceeds 100%.
.contentLine .column {
float: left;
margin: 0;
width: 30%;
margin-right: 1%;
padding: 1%;
position: inherit;
}
Related
I'm pretty newbie with HTML and CSS. So, I've got a problem with the width of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the width per cents a little or is there some flaws in my code that could cause this?
I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: http://jsfiddle.net/gj53jbz9/
body{
font-size: 15px;
margin: 0px;
background-color: lightgrey; }
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
#name{
padding: 5px;
font-size: 25px;
float: left; }
#navbar{
float: right;
text-align: right; }
#navbar a{
background-color: black;
display: inline-block;
width: 120px;
text-align: center;
padding: 10px 0px;
text-decoration: none;
color: lightgrey; }
#title{
clear: both;
text-align: center;
padding-top: 100px;
font-size: 45px; }
#content{
text-align: center;
width: 80%;
margin: 0px auto; }
<div id=header>
<div id=name>Name</div>
<div id=navbar>
Link1
Link2
</div>
<div id=title>Insert title here</div>
</div>
<div id=content>
<h3>Age of aggression</h3>
<p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
<p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
</div>
Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width).
#header{
padding: 30px;
width: 100%;
}
Either remove padding and add it to an inner element with no width set, or use:
box-sizing: border-box;
Which makes the width calculation include padding. :)
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Take a look at this part of your code:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS:
#header{
padding: 30px;
width: calc(100% - 60px);
height: 250px;
background-color: grey; }
It seems to work if you remove margin: 0px; from the properties inside body {}
I don't know why it has this behaviour
Every HTML element has some default values. Please check here:
https://www.w3schools.com/cssref/css_default_values.asp
You can also try to set all elements margin and padding as 0. Just like that:
*{margin: 0; padding: 0}
By default, HTML elements calculate their sizes based on the content only, so excluding the padding, borders and margins. To change that behavior, use:
box-sizing: border-box;
This makes the calculation include the padding and borders. You can add it to any element you want, but it is a common practice to add it to all elements:
* {
box-sizing: border-box;
}
Don't give padding from left and right to your header div.
Add some margin to name and navbar div
just like this
#header {
padding: 30px 0px;
width: 100%;
height: 250px;
background-color: grey;
}
#name {
padding: 5px;
font-size: 25px;
float: left;
margin-left: 40px;
}
#navbar {
float: right;
text-align: right;
margin-right: 40px;
}
It is because padding is being summed to width 100%.
Try to use box-sizing, like that:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey;
box-sizing: border-box;
}
Header.Width=100% and Header.Padding=30px are causing the problem.
You are telling the browser that the header will use the 100% of the width, PLUS a pad of 30px. So the width is 100%+30px of the space created by the padding.
Try moving the width to the body property so all the page will use the 100% of the available space. That should fix it.
left: 0px;
right: 0px;
width: auto;
position: relative;
when the screen size changes to less than 992px , i want the center div to come first and occupy 100% of the width whereas the left and right column should come right below it and share 45% 45% width on the same line, i want to use this for tablets, but when i try to reposition them, i manage to push the center up first but the right div falls below the left div leaving a large space to the right.
instead of
....center....
.left..right.. i get
....center....
left..........
right.........
below is the complete css & html for the divs
<section class="cbs-center-container">
<div class="column-type-1"> (left column)
</div>
<div class="cbs-content-col"> (center content)
</div>
<div class="column-type-1"> (right column)
</div>
</section>
.cbs-center-container (container)
{
padding: 30px 30px 13px 30px;
background:#eeeeee;
}
#cbs-content-col, (center div)
{
float: left;
min-height: 1px;
}
#cbs-content-col {
width: 50%;
padding: 5px 10px 60px;
}
.column-type-0{
float: left;
}
.column-type-0{
width: 25%;
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
}
#media only screen and (max-width: 992px) {
.cbs-center-container {
display:table; (first i display container as table)
}
#cbs-content-col{
display: table-header-group; (this is the div i want to show first)
width: 100%
}
.column-type-0 {
width: 45%;
display: table-footer-group; (this 2 columns should come second )
position: relative;
height: auto;
padding-right: 5px;
padding-left: 5px;
}
}
#media (max-width: 640px){ (mobile display)
.column-type-0{ width: 80%;
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
margin: auto;
}
}
please help , how do i re position dom elements with ease,
its best a solution without flexbox, didnt the community think about this,
i just realised i need it now since i got into responsive web design and if i may ask isn't and average tablet screen size around 1000px ?
Most of the time you dont need to use custom css for the positioning, you just add the float to the styling.
div div_name {
float: left;
/* remaining code goes here...........*/
}
I am having a bit of a hard time trying to get the 3 column layout sorted.
This is my current HTML and css layout
<div class="row">
<div class="col">C1</div>
<div class="col">C2</div>
<div class="col">C3</div>
</div>
The CSS is as follows:
.row {
width: 964px;
}
.row:last-child {
margin: 0;
}
.row .col {
width: 33.33%
float: left;
margin-bottom: 20px;
margin-right: 10px;
}
The columns are basically of equal width using percentages of 33.33%. Problem I have is that while the columns show up within the the row container, on the last column, there is a gap on the right margin. Increasing the right margin pushes the last column to the next line.
How can I line up the columns so that they keep the same width, but for the first and last columns to not to have any margins (ie. no left margin on the first column and no right margin on the 3rd column).... Any ideas?
Thank you..
.row .col:last-child
{
margin-right:0;
}
this will do. but, don't forget to include it after '.row.col' style
Use % instead of px here margin-right: 10px;
.col{
width: 32%;
margin-right: 2%;
}
.col:last-child{
margin-right: 0%;
}
you should use
.row{
display:table;
}
.col{
display:table-cell;
}
EXAMPLE:
.row{
display:table;
width:100%;
}
.col{
border:1px solid #000;
display:table-cell;
width:33%;
}
FIDDLE DEMO
If your row is a fixed width (964px) then can't you just calculate the column widths that you want and put the margin as a left and right on column two?
Also, 964 doesn't divide by three so it's a bit of an odd choice - you'll always end up with rounding issues - I've changed it to 963px for the example below.
e.g.
<div class="row">
<div class="col">C1</div>
<div class="col middle">C2</div>
<div class="col">C3</div>
</div>
with CSS:
.row .col {
width: 321px;
float: left;
margin-bottom: 20px;
}
.row .middle {
margin-left: 10px;
margin-right: 10px;
}
Thanks for the answers guys, I ended up having to change the padding amount that my main site container was using. Once I had a width of 970px, I just borrowed a bit of css from Bootstrap to get the layout to display correctly.
End result being:
.row {
margin-right: -15px;
margin-left: -15px;
}
.col {
float: left;
width: 33.33333333%;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
That lines everything up perfect for me.
I have a responsive grid layout for thumbnail images and a full width header. It is built using 'ul' and 'li' to make the grid. So basically I'm not using a responsive grid layout throughout. Although I would like to have a three column footer at the bottom that is responsive (stack on top of each other)
I want the first column to align full left and the other two columns to align right. each column is only around 15% of the total width (so i couldn't just have all three width 33%) I want the functionality of a three column layout like in many of the themes like skeleton boilerplate, etc
I am having trouble making a good css markup that will work, I have used...
css
F1 {
padding: 15px;
width: 100px;
margin: 0 0 0 20px;
float: right;
}
.F2 {
float: left;
text-align: left;
}
.F3 {
font-size: 13px;
text-align: right;
float: right;
}
but that just separates the divs, and doesn't offer much control
any help or references to help are greatly appreciated
If I'm understanding this correctly, the following can work. Shown with divs, but a ul & li structure would work as well.
HTML:
<div class="footer">
<div class="f1">first left</div>
<div class="f2">middle right</div>
<div class="f3">last right</div>
</div>
CSS:
.footer {
text-align: center;
width: 100%;
}
.f1 {
background: green;
padding: 0;
margin: 0;
}
.f2 {
background: pink;
}
.f3 {
background: blue;
}
.f1,
.f2,
.f3 {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: right;
font-size: 12px;
padding: 0 8%;
min-width: 300px;
width: 33%;
}
.f1 {
text-align: left;
}
If you set your divs to display inline-block with a min-width, on browser resize the columns will begin to stack one on top of the other.
Alternatively, depending on styling, you might want to set them to inline-block without a min-width, and set a media query for them to display block on all screen sizes you want them stacked one on top of the other.
If you set box-sizing to border-box, you can add the necessary padding to the inside of the container to keep the content area around 15% of the total width.
Hope this helps!
I have a problem with margin on my site: link , when i want increase space between left_sidebar and right_content with margin then there is no change.
CSS{
.left_sidebar{
float: left;
padding: 30px 0;
width: 28.2%;
margin-right: 20px !important;
}
.content_right {
float: right;
padding: 30px 0;
width: 69%;
}
You are floating left and right while using percentage widths. This doesn't leave any room for margin. There are different ways to fix this, but I would suggest decreasing the percentage of both divs to allow more room between them.