This question already has answers here:
How can I align two divs horizontally? [duplicate]
(10 answers)
Closed 4 years ago.
I am mainly a backend developer but am trying to get a layout to come out right. Basically I am creating a list view page that will contain a div tag on the left that has a bunch of filters (drop down lists, checkboxes, etc). On the right side of the screen I am going to have a div tag that contains a grid. This seems to be working but looks terrible when I'm on an overhead or when my screen is not maxed. Am I doing this right? Basically here is what I am after:
The CSS I had done for this was as simple as this:
.filterContainer {
width:20%;
float:left;
}
.gridContainer {
width:79%;
float:right;
}
Basically .filterContainer is my left div (dLeft) and .gridContainer is my right div (dRight). Is this valid for what I am trying to achieve? The result is as shown here:
http://i.imgur.com/WFasMF1.png
However, if I resize my window I end up with the following result:
http://i.imgur.com/4u9HRlK.png
Which I guess is normal because I'm resizing, but is my css valid?
First of all when you are dealing with Grid Based layouts, always make sure you use
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Resets */
margin: 0;
padding: 0;
}
Note: * is nothing but a universal selector which will apply the
defined properties to every element. Inorder to target specific
elements, use more specific selectors like div.class_name etc
Now, why you need that?
If you see in the diagram below..
CSS adds margin, padding and border outside the box and not inside, which is default content box behavior, so when you use the snippet I shared, it changes the box model behavior and makes the element count the border and padding inside the element.
Coming to your issue, the CSS you provided is perfect, but position, float, or margin or even uncleared floating elements anything can cause the issue which you are facing, so if you can, consider altering your CSS stylesheet, and would be worth if you use box-sizing: border-box;
How do you achieve this?
Well, obviously, I won't provide you entire thing, but just a general idea of how to achieve this, as I see you are using width: 79%; now that's the very strong reason of why I suggested you to alter the box model.
Now here, I have two elements floated to the left, with the box model altered, so I don't have to use -1% width for any of the element. When you need spacing, nest more blocks inside the grid and then, instead of margin use padding especially on floated parent elements.
Demo
<div class="wrap">
<div class="left_wrap"></div>
<div class="right_wrap"></div>
</div>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* Resets */
margin: 0;
padding: 0;
}
.wrap:after {
clear: both;
display: table;
content: "";
}
.wrap > div {
min-height: 300px;
}
.wrap .left_wrap {
width: 30%;
float: left;
border: 3px solid #f00;
}
.wrap .right_wrap {
border: 3px solid #000;
width: 70%;
float: left;
}
if you make the left container fixed width that will help. and you can always wrap both those divs in another div where you set a max-width if you'd like.
Maybe you can use position:absolute?
Or just use table tag for what it was designed? It is not like W3C plans to discard that tag in near future.
That is not a normal behavoir of floated blocks, since they placed before any normal block and not use normal parent container context.
You can use Frameset for dividing your pages into frames and then add css to it for style.
Related
I made a small form that has potential to take credit-card details, as part of the Daily UI challenges (#002). I haven't implemented any functionality, just design.
Here is the form I made: http://codepen.io/alanbuchanan/pen/vGZPBp
My questions are regarding the two half-width sections of the form - Expiry Date and CC Number.
Here is the relevant code - this targets the two divs that wrap the two form elements:
div {
display: inline-block;
box-sizing: border-box;
width: 45%;
}
I wrapped these two sections in their own divs so that I could have more control over their positioning. Is it possible to position these at half-width without these wrapper divs?
In the example they are taking up 45% width because at 50%, the second div overflows onto the next line.
I just want to give it 50% and have it take up half the space as it should. Or should it not?
Even at 45% width, you can see there is about 1px difference between the height of these two divs.
After inspecting with Chrome Dev Tools, I can't find the problem behind this.
Any answers to my questions or different approaches to the situation will be very useful.
In most cases a setup as the following code, could be a best practice when aiming for creation of inline-block columns.
.column-container {
font-size:0;
line-height:0;
}
.column-container .column {
display:inline-block;
vertical-align:top;
width:50%;
font-size:16px;
line-height:120%;
}
You might wonder, why does the container have zero font-size and line-height?
This is often used because some HTML code cotains indented code, like so:
<div class="column-container">
<div class="column">text</div>
As of this example, you can see that the container div contains spaces/tabs before the column div is programmed. These spaces/tabs are rendered as characters and so they will obey to whatever the css is telling the characters to do in that container div.
You can use flexbox.
Create a outer div having id as flexdiv which will contain both the div of expiry and CC number.
Then write following code:
#flexdiv
{
display: flex;
justify-content: space-between;
div{
display:inline-block;
box-sizing: border-box;
width:49%;
}
}
Codepen Example
Here is the guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Pen: http://codepen.io/anon/pen/jqwJMg
Comments: just add font-size:0 to the form.
These are the changes I made:
.minicontainer {
width:50%;
}
form {
font-size:0;
}
When you add two element inline(50%-50%) you should make sure that the font-size is zero
I'm trying to create a small navigation menu, however IE seems to render it differently, completely messing it up.
Here's what html/css I'm using (jsfiddle renders it correctly, as does chrome):
http://jsfiddle.net/Seytonic/gmp975sm
However IE renders it like this (I omitted the bootstrap in the jsfiddle):
EDIT: I'm using IE 11
This is one reason why it's important to declare a width on floated elements. If you don't, the box size may render differently across browsers.
Try adding width: 330px to the #navigation container.
Revised Demo 1
The 330px is just for example. You can use relative units, like percentages or ems, as well.
Again, to avoid unpredictable browser behavior, also specify a width for the two floated child elements:
#navbar li { width: 49.5%; }
Then adjust the spacing between the boxes on the top row:
#projects { margin-left: .5%; }
#about { margin-right: .5%; }
Lastly, width by default only includes the content box. Make it also account for padding and border with box-sizing: border-box:
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit;}
Revised Demo 2
More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.
Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.
.container-node {
margin: 10px;
background-color: #0f0;
}
.content-node {
margin: 20px;
background-color: #f00;
padding: 5px;
color:#fff;
}
.border {
border:1px solid #00f;
}
The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.
I appreciate any help or documentation on this. Thanks
http://www.w3.org/TR/CSS2/box.html
Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:
http://reference.sitepoint.com/css/collapsingmargins
You could just add a padding of 1px and reduce the margin by 1 like so:
.container-node {
margin: 9px;
background-color: #0f0;
padding: 1px;
}
Applied to your problem:
http://jsfiddle.net/n65bX/1/
The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).
To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:
.container-node {
/*margin: 10px;*/
padding: 20px;
background-color: #0f0;
}
Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:
.root-node {
border: 1px solid #bababb;
background: #ff0;
margin: 10px 0;
padding: 10px;
}
with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element.
It's far more logic to use it this way :)
When you want to create an inline spacing use padding, if you want it to go outside use margin.
jsFiddle
This might also be usefull: When to use margin vs padding in CSS
Update
So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?
Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.
So why is it pushed at the root element?
To debug it even more; let's only set margin to the left and right of the .content-node:
margin: 0 55px;
jsFiddle
It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.
I found this topic about this matter: Why does this CSS margin-top style not work?
So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).
I will try to explain this the best I can.
In the element containing the "container-node", there is no 'area' for that container to give margin to.
By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.
I'm editing a basic Wordpress template and looking to have a multi-column front page (showing 2 sets of articles per row). I've done the following in CSS:
.front-page-container article:nth-child(odd) {
width:50%;
float:left;
clear:both;
}
.front-page-container article:nth-child(even) {
width:50%;
float:right;
}
where front-page-contaner is the class of a containing div. The HTML structure is:
<div class="front-page-container">
<article id="post-1"></article>
<article id="post-2"></article>
<article id="post-3"></article>
<!-- etc -->
</div>
I want to align post 1 & 2 in the same line, and have post 3 (and 4) on the next row.
While the CSS sort of works, the two posts I want together don't line up as shown is this picture. I've tried adjusting the widths in case there was some sort of overlap but it doesn't fix the issue (even though they get visibly smaller).
Any help/pointers would be appreciated :)
.front-page-container::after { clear: both }
.front-page-container * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.front-page-container article:nth-child(odd) {
width:50%;
float:left;
}
.front-page-container article:nth-child(even) {
width:50%;
float:right;
}
That should do it. Box sizing makes the divs width the calculation of width minus padding and borders. So no padding or bordering will add to the declared width. (I think thats the best way to explain it). The ::after pseudo-element clears any floats after the container.
As a bonus I will add that this article helped me immensily with this subject:
http://css-tricks.com/dont-overthink-it-grids/
You posted code works as expected. See http://jsfiddle.net/XqDn6/1/
The issue is most likely some margin/padding on the article elements causing the width of each element to exceed 50% and so not being able to fit 2 in a row..
One way to solve this problem is to use box-sizing: border-box which means that border/paddings are included in the width value.
.front-page-container article{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Demo with border/paddings and box-sizing: http://jsfiddle.net/XqDn6/2/
It works just fine for me: http://codepen.io/skimberk1/pen/6127d1c3a4961de1f9c1ef20d5400d0f.
I have no idea what could be going wrong in your case. Maybe some other CSS is affecting it?
Using the CSS box-sizing: border-box; might help, as it makes it so that the maximum width (including padding and border) is the width you defined (in this case 50%);
The problem is clear: both, as read in CSS schools,
No floating elements allowed on the left or the right side of a specified paragraph.
Here's an exampleo f how clear can be used: Understanding the CSS Clear Property.
Though float is an old solution used for stretching the container, as can be seen here: Clearing floats.
Solution: delete that if you can or edit the question for saying why its there (and cannot be taken off) so we can help you further.
I am trying to setup a layout where the content (can be text or anything), is in the middle while the background color or image is in the entire width. My solution was to create an element-container with the background and a child element with smaller width and margin: 0 auto;
(http://jsfiddle.net/kp4D8/1/).
Has anyone else come up with another workaround for a situation like that thats simpler?
Thanks,
Gasim
Your method is how you go about doing this and is probably the best way.
One alternative method you could use though if you wanted to use minimal markup was to cut out the <section> element and just apply the margin to elements under .element-container like this:
jsFiddle
.element-container * {
padding: 5px;
width: 50%;
text-align: justify;
margin: 0 auto;
}
.element-container h2 {
text-align: right;
}
The reason I would prefer to go with your original method is so I can style the background of the inner element more easily and style everything together without the use of the * selector.