I'm trying to make a 3 column responsive form with rows that can use merged cells like an html table.
The problem I'm running into is that because of the margin on each column using a width of 30/60/90% doesn't align up with the row above it.
I created an example here (see row 1 and row 3):
https://jsfiddle.net/5ktkxres/2/
.formBlock {
float:left;
margin: 5px;
min-width: 200px;
}
.oneFormBlock {
width: 30%;
}
.twoFormBlock {
width: 60%;
}
I know its a simple fix but I can't find the solution, thanks in advance.
Or try CSS calc:
.formBlock {
float:left;
margin: 5px;
min-width: 200px;
}
.oneFormBlock {
width: 30%;
}
.twoFormBlock {
width: calc(60% + 10px);
}
https://jsfiddle.net/5ktkxres/10/
Make sure to take into consideration the margin on each side of each input. If you have a threeFormBlock at 90%, you will need to add 20px due to right margin on input one, both margins on input two and left margin on input three.
The quickest fix I can see is to change the margin to 1% and then add that to the width of .twoformblock. Like this:
.formBlock {
margin: 5px 1%;
}
.twoFormBlock {
width: 62%;
}
I think the best way is to use Bootstrap for that. (I know it is a "lazy" solution).
Related
I'm trying to create a grid with columns. The problem is that once a column is bigger than the other, the next column won't float to the left anymore. Is there anyway I can fix this?
The code for the column is simple:
.column { width: 320px; float: left; }
I want to avoid defining a height or use a float: right.
Thank you
Adding clear fix by using nth-child could be a solution.
.column:nth-child(3n+1) {
clear: both; /* on row 4,7,10,13,16... */
}
Demo: http://jsfiddle.net/0nxb6xnL/
It seems it is happening for different height. Can you make the height identical and try again?
Like
.column { width: 320px; height: 200px; float: left; }
I want to implement the following responsive layout in a webpage (HTML5 & CSS3):
All three div tags are wrapped inside a div with max-width of 960px;
I want to keep the width of "Navigation" div fixed therefore the following styles are being applied on it:
width:90px; float:left; padding:5px;
How can I make the "Contents" div occupy all remaining space without specifying its width, while keeping the layout responsive at the same time?
Thank you.
#content{
margin: 0 0 0 90px;
padding: 10px 30px;
}
Just put everything in a wrapper div and specify it's width to 960px
It depends on the browser support you want (need), with only 3 DIVs in a IE6+ way is hard (I think it's actually impossible). You're best bet is with the CSS calc method on the Content's DIV
width: calc(100% - 90px); The CSS calc method has IE9+ support so you would need to take that into account, in IE8- you would still need to use percentages.
If you are wondering how to separate the IE9+ code, then simply use #media i.e. something like this:
#media all {
#navigator {
width: 90px;
}
#content {
width: calc(100% - 90px);
}
}
#media is IE9+ compadible and because IE8- do not can't make heads or tails of it it will not affect them. So it is safe to place the IE9+ code in it.
If you can modify the HTML a bit I would advice the following:
<html>
<head>
<style type="text/css">
#h {
background: #f00;
}
#n {
background: #0f0;
width: 90px;
float: left;
}
#c_container {
background: #005;
width: 100%;
float: right;
margin: 0 0 0 -90px;
padding-left: 90px;
box-sizing: border-box;
}
#c {
background: #00f;
height: 50px;
}
#container {
max-width: 940px;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="h">head</div><div id="c_container"><div id="c">cont</div></div><div id="n">nav</div>
</div>
</body>
Note how the content has a separate container, with is floated one way and the navigator is floated the other way, this is to make sure that they are not on the same plane.
the #c_container has a margin-left: -90px to bring it to the same row as the navigator and a padding-left: 90px; to make sure that #c (the new content DIV) is now visible. The #c_container also has the #c_container DIV. Without it you would need another container DIV so the width would not be affected by the padding, but that is easy enough to add, so I'll leave it up to you.
If you would use another container DIV for the content, then that solution would be IE6+ compatible, while the one I gave you is IE8+ compatible.
This is my code: http://jsfiddle.net/3GPTy/4/
CSS:
.price {
display: inline-block;
width: 19%;
background-color: pink;
margin-right: 8%;
}
.last {
margin-right: 0%
}
.container {
width: 780px;
margin:0px auto;
}
* {
margin: 0px;
padding: 0px;
}
What I don't understand is, I have 4*19 + 3*8 which should equal 100% but still it doesn't fit on one line?
To elaborate further, here's a few ways of solving the problem:
Comment out the space
</div><!--
--><div>
Put the space in the tags
</div
><div>
Just shove it on one line
</div><div>
The last one especially, ideally you should be minifying your HTML - I do on-the-fly with PHP magic, and with that I can write readable HTML and not have spaces.
CSS
.price {
width: 19%;
background-color: pink;
margin-right: 8%;
float:left;
}
http://jsfiddle.net/3GPTy/10/
Its because of the how the browser treats fonts; between letters it puts a small sliver of whitespace to space the characters out correctly. Counterintuitively this idea is applied to all elements, so if you have two div's at 50% width they will not fit on the same line because the small white space added makes the total width greater than 100%.
To solve this add:
font-size: 0;
to the parent div. You can then set the desired font size in its children to remove the white spacing that would have otherwise been added
Here's more detail on the issue from this CSS Tricks article, as well as other soultions including floating the elements and using comments.
I am trying to make a div with text and a div with a button fit side by side. It works fine until you make the screen really narrow. Is there a way to force them to be on the same line and for the first div to shrink to accommodate the min-width of the second?
http://jsfiddle.net/C3877/9/
To see what I mean, resize the window, reducing the width, until the div with the button is forced onto the second line. That is what I'd like to prevent.
Note: I only care if a suggested fix works properly in Chrome.
Instead of floats, you could use display: inline-block. This will keep things all on one line, and respect the min-width as well.
Inline-block fiddle: http://jsfiddle.net/C3877/8/
In addition, since you only care about Chrome, you could look into flexible boxes
A (quick) flex fiddle here: http://jsfiddle.net/C3877/11/
You can use negative margin-left for the floated right element. Note that this solution keeps using float for both the left and right divs, without using float, you have dozens of solutions (as some of other answers pointed out).
#right_div {
...
margin-left:-100%;
}
Note that all the next content should be wrapped in a block element and use clear:both. I also added a sample of such an element with background:green in this DEMO.
Appending this does the trick I suppose:
#media (max-width:515px) {
#left_div { width: 100%; margin-right: -100px }
}
UPDATED
You could use margin and absolute positioning:
CSS
#parent_div {
width: 100%;
height: 10%;
position: relative;
min-width: 40px;
}
#left_div {
width: 80%;
min-width: 100px;
height: 80%;
float: left;
background-color: #000;
color: #FFF;
}
#right_div {
width: 15%;
min-width: 100px;
float: right;
background-color: blue;
position:absolute;
right: 0px;
}
input[type=button] {
font-size: 2rem;
}
SEE DEMO: http://jsfiddle.net/C3877/19/
You will have to play with some of the css to get it just right when you move it on your website. But this is a sure quick fix.
I need relative solution for setting odd cols width as 1X and even row 2X of odd rows.
I am using this CSS:
.colTest{
width:100%;
}
.colTest col:nth-child(2n+1){
width: 100px;
}
.colTest col:nth-child(2n){
width: 200px;
}
as in:
jsFiddle
How can I set relative value (i.e %) for table cols with different number of cols?
(means that table cols are variable between 2 and 10)
jsFiddle Demo
.colTest {width:100%}
.colTest col:nth-child(2n+1){
width: 1%;
}
.colTest col:nth-child(2n){
width: 2%;
}
Update:
Like cbroe said you'll get better result with td instead of cols, but the general idea of my solution is the same.
jsFiddle Demo
.colTest {width:100%}
.colTest td:nth-child(2n+1){
width: 1%;
}
.colTest td:nth-child(2n){
width: 2%;
}
Formatting table cells via cols should work in theory, but browsers don’t always respect that. Format the td instead, see http://jsfiddle.net/2Gkxc/3/
td:nth-child(2n+1){
width: 100px;
}
td:nth-child(2n){
width: 200px;
}