I'm looking to create a 2 column grid in CSS where some of the column elements can have different heights. Currently I have made the grid but the height of the row is dictated by the height of the tallest element.
I want to remove the vertical spacing between each of the elements on the Y axis.
Some code below
<div class="home-block-cont">
<div class="home-block">
<div class="home-block-inner">
<h2 class="title">General</h2>
<div class="subtitle">Basic Information about the company:</div>
<ul>
<li class="child-list-item">
Address
Staff Contact Details
Office Security
VAT Number
</li>
</ul>
</div>
</div>
</div>
CSS
.home-block-cont {
margin-top: 20px;
width: 100%;
overflow: auto;
}
.home-block {
background: $LIGHTGREY;
border-radius: 6px;
width: 49%;
margin-bottom: 2%;
float: left;
}
.home-block:nth-of-type(odd) {
margin-right: 2%;
}
.home-block-inner {
padding: 10px 30px;
}
Any advice/guidance appreciated.
Related
I have a grouping of containers within another container. For clarification, here's the HTML:
<div class = "box-grouping">
<div class = "box-section grey">
<h2>What We Do</h2>
</div>
<div class = "box-section grey">
<h2>Where We Are</h2>
</div>
</div>
At the preferred resolution, the two boxes would be side by side, with the first box's left margin being equal to the second box's right margin, plus some space in between each. When I design in half my resolution, it looks like this. That's fine, except when I raise the resolution to full size, it looks like this. As you can see, the left and right margins are not equal.
I've tried setting the left and right margins to auto, but that didn't work. Here's the CSS I'm using:
.box-section {
display: inline-block;
width: 40%;
height: 300px;
margin-left: 60px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
I'd like the page to look like the half resolution screenshot, in any resolution. Additionally, the containers always appear too big in full resolution, but when I try to scale them down, they get too small for smaller resolutions. Any help would be appreciated!
You could set text-align: center to your .box-grouping class to center the boxes. Then, in your .box-section class, change your margin-left: 60px to margin: 0 30px to apply an even margin to both of the .box-section divs.
With the way your code is currently, you will need to add a media query to shrink the boxes to prevent wrapping for smaller devices.
.box-grouping {
text-align: center;
}
.box-section {
display: inline-block;
width: 40%;
height: 300px;
margin: 0 30px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
<div class="box-grouping">
<div class="box-section grey">
<h2>What We Do</h2>
</div>
<div class="box-section grey">
<h2>Where We Are</h2>
</div>
</div>
You could make the parent div display flex like such.
.box-grouping {
display: flex;
justify-content: space-around;
}
.box-section {
flex: 0 1 40%; /* this means -> flex:[grow] [shrink] [width]; */
display: inline-block;
height: 300px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
You can do something like this :
HTML
<div class = "box-grouping">
<div class = "box-section grey float-left">
<h2>What We Do</h2>
</div>
<div class = "box-section grey float-right">
<h2>Where We Are</h2>
</div>
</div>
CSS
.box-section {
display: inline-block;
width: 49%;
height: 300px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.box-grouping {
width: 90%;
margin: 0 auto;
}
Working codepen
<html>
<div class = "box-grouping">
<div class = "box-section grey">
<h2>What We Do</h2>
</div>
<div class = "box-section grey">
<h2>Where We Are</h2>
</div>
</div>
</html>
<style>
.box-section {
display: inline-block;
width: 40%;
height: 300px;
padding-top: 20px;
border-radius: 10px;
border: 2px solid black;
text-align: center;
}
.box-grouping {
align-content: center;
text-align: center;
}
</style>
*Change the second box class name to a different name
*And float the first box to the left. And float the second box to the right.
I usually give my container a width off 100%.
Now for the first box give it the margin you want like margin-left 10px.
Now for the second box give it the same margin. Margin-right 10px.
Now for the spacing in between the two boxes. if you want it to be 6px. Give each box 3px margin.
First of all, please look at this code.
I learned that this was a common way to realize liquid layout.
But I can not understand some of this code.
.container {
overflow: hidden;
}
main {
float: left;
width: 100%;
margin-right: -340px;
background: red;
}
.main-inner {
margin-right: 340px;
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Question 1
I understand that the negative margin has the effect of moving an element in the specified direction. However, when you run this code, the main element does not seem to be moving at all. Why is this?
Question 2
Since we set the width of the main element to 100%, I understand that the aside element hits the main element and that the main element and aside element can not be side by side.
So, I think that we prepare a horizontal width that can apply the aside element by applying negative margin, but the background color of the main element is applied in the same way as when the horizontal width is 100%. Why is the background color of the main element not (100% - aside width)? How is this series of rendering done?
Question 3
Which document on W3.org describes these actions? I tried looking, but I could not find any detailed information on them.
thank you.
Let's start by adding the properties one by one and see what is happening.
Intially we have this code with no margin applied and only float elements:
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
It's clear that you made the red element to be width:100% floating on the left and the green one to float on the right with a fixed width. You may also notice that p element is having a default margin that's why the blue is not totally covering the red.
Now if you add negative margin-right you will not move the element or decrease the width but you will pull the content from the right in order to overlap the element. Here is a basic illustration:
.box {
width: 200px;
height: 200px;
background: red;
float: left;
}
<div class="box" style="margin-right:-100px;height:220px">
</div>
<div class="box" style="background:blue;">
</div>
As you can see the blue box is overlapping the red one by exactly 100px because we applied -100px to the margin-right of the red box. Same logic will happen in your case, you applied a negative margin equal to the size of the sidebar so you created the need space to move the sidebar at the same level of the main element.
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
So the main element is still 100% width BUT the sidebar is overlapping it due to negative margin.
Now the last step is to add the margin inside the main and in this case it will reduce the width of the inner element to make the total (width + margin) always equal to the width of parent element (containing block)
.container {
overflow: hidden;
background:yellow;
}
main {
float: left;
width: 100%;
background: red;
margin-right:-340px;
}
.main-inner {
background: blue;
margin-right:340px;
}
.sidebar {
float: right;
width: 340px;
background: green;
}
<div class="container">
<main>
<div class="main-inner">
<p class="main-title">Main</p>
</div>
</main>
<aside class="sidebar">
<div class="sidebar-inner">
sidebar
</div>
</aside>
</div>
Here is another illustration of margin with block element non floated:
.container {
border: 2px solid;
max-width: 50vw;
margin: auto;
}
.first {
height: 100px;
background: red;
margin: 0 -50px;
}
.second {
height: 100px;
background: blue;
margin: 0 50px;
}
<div class="container">
<div class="first">
</div>
<div class="second">
</div>
</div>
In this case the width is increasing/decrasing due to margin because the logic is always: width + margin = width of containing block.
With elements like float and inline block the logic is the same but we won't have width changes because the width is defined either by the content or explicitly.
.container {
border: 2px solid;
display:inline-block;
}
.first {
float:left;
height: 100px;
background: red;
margin-right:-50px;
}
.second {
display:inline-block;
width:200px;
height: 120px;
background: blue;
margin-top:20px;
margin-right:-100px;
}
<div class="container">
<div class="first">
some text here
</div>
<div class="second">
</div>
</div>
Here the float element has a width defined by the content, the inline-block has a width equal to 200px. The negative margin is creating the overlap and the size of the parent element (the containing block) is equal to width + margins.
For the references:
8 Box model
9 Visual formatting model
10 Visual formatting model details
The above explanation is very simplifed. Refer to the specification links for a full and details explanation.
The odd placement from <main> comes from a browser css-rule
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
You can reset it using a css reset like normalize.css.
However, I recommend using display: flex. Some wonderful resources.
.container {
display: flex;
}
main {
width: 75%;
}
aside {
width: 25%;
}
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);​
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo
I think I'm going insane over this now, no idea how to resolve it... please help guys.
I have three divs on a page that should all fit onto one line. They have to be square (with rounded corners) so I have to set a width and a height to keep the 1:1 aspect ratio. I have a heading inside them that should be vertically and horizontally centered. The wording of the heading may change and might run over 2 lines so a simple margin-top is not enough in this case.
First problem: there are weird margins at the top despite there not being anything else affecting that (well there must be but I can't see what). If I float the divs they line up but floating isn't the way to go is it... why is inline-block not working?
Second issue (which is likely related, so I'm posting it in one go) is that I'm unable to vertically center the title divs. Any ideas?
Here's a jsfiddle to illustrate: http://jsfiddle.net/fydC4/
The HTML:
<div id="container">
<div class="nav-left">
<p id="nav-left-title">In this section…</p>
<ul>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
</ul>
</div>
<div id="main">
<h1>Assignments</h1>
<p>Click on the titles of the assignments to find out more.</p>
<div class="box" id="good-designs">
<h2 class="box">3 good designs</h2>
</div>
<div class="box" id="temp">
<h2 class="box">title here</h2>
</div>
<div class="box" id="temp2">
<h2 class="box">title here</h2>
</div>
</div><!--end main-->
</div>
</div><!--end container-->
The CSS:
#container {
max-width: 960px;
margin: auto;
}
#main {
display: table-cell;
width: 73em;
padding: 1em 2em 2em;
background-color: white;
}
#nav-left-title {
padding-bottom: 0.5em;
margin: 0;
color: white;
}
.nav-left{
display: table-cell;
width: 14em;
background-color: #87a8b1;
padding: 1.1em;
font-size: 1.2em;
}
.nav-left li {
padding: 0.5em 0;
border-bottom: 1px solid white;
}
h2.box {
padding: 15px 0;
margin: 50% 15px;
margin: auto;
text-transform: uppercase;
text-align: center;
}
div.box {
padding: 15px;
height: 180px;
width: 180px;
border-radius: 50%;
margin-top: 25px;
margin-left: 1.5em;
display:inline-block;
/* float: left; */
}
#good-designs {
background-color: green;
}
#temp, #temp2 {
background-color: yellow;
}
Hi you may use two properties to align all your elements
vertical-align:middle;
display:inline-table on div.box and
display:table-cell on h2.box; (for the texts inside your divs)
Check this code http://jsfiddle.net/fydC4/16/
This worked for me, replace inline-block with float left.
you are also calling margins twice on some element which are not necessary
here you go
jsfiddle.net/fydC4/14
I have an element with a 70% width, and it is floating beside another element with 30% width. However, when I add 25px of padding, the element expands and breaks the format.
Is there any way to make padding increase the contents' distance from the element's edge, as opposed to making the element bigger?
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
float: left;
width: 30%;
background-color: lightgreen;
}
.padded {
padding: 25px; /* Forces box onto next line */
}
<div>Works:</div>
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>
<br><br>
<div>Broken:</div>
<div class="seventy">70% wide</div>
<div class="thirty padded">30% wide, padded</div>
When you use the border-box model, the padding is included in the box size. See here for details.
.seventy {
float: left;
width: 70%;
background-color: lightsalmon;
}
.thirty {
box-sizing: border-box;
padding: 25px;
float: left;
width: 30%;
background-color: lightgreen;
}
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>
I would create another element of the same type (may I guess it's a div?) inside the element and set that one to have a padding/margin of 25px.
For example:
<div id="wrapper">
<div id="width30">
</div>
<div id="width70">
<div id="padding25">
Acctual content here.
</div>
</div>
</div>
</div>