Menu
I need your help.
My idea is to have 2 fieldsets on the page that is 100% width of the page and adjacent to each other. Browser of choice is (IE10)
Right now, it does not seem that they comply with what i'd like them to do.
As it stands right now now, they are both still stacked up on top of each other.
How can I get the fieldsets nicely side by side?
Here's a quick pic of what is happening:
Here is the markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
fieldset {
padding: 3px;
width: 300px;
float: left;
}
#field1 {
width: 70%;
}
#field2 {
width: 30%;
}
label {
float:left;
font-weight:bold;
}
input {
width: 100%;
box-sizing:border-box;
}
</style>
</head>
<body>
<fieldset id="field1">
<legend>Message Centre</legend>
<input type="text">
</fieldset>
<fieldset id="field2">
<legend>File Number</legend>
<input type="text">
</fieldset>
</body>
</html>
822
Yep, i did almost the same :p
box-sizing is the solution !
fieldset : http://jsfiddle.net/8dSnw/5/
input{
float: left;
width: 50%;
display: inline-block;
box-sizing: border-box;
}
Only input :
http://jsfiddle.net/8dSnw/3/
104
Insert two fieldsets into one table:
<table> <td> Fieldset1 </td> <td> Fieldset2 </td></table>.
You are very close.
Border-box is your friend and there is some default browser styling that is getting in your way. I added border-box to the fieldset as well as the input. Because you had padding and there was some default margins and borders on your fieldsets, the percentages ended up being larger than 100%. Removing the default margin and adding border-box to the fieldset addresses these issues:
fieldset, input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
fieldset {
margin:0;
}
http://jsfiddle.net/U46V7/
Border-box changes the width attribute to include padding and borders in it's width calculation. So where as before #field1 was set to 70% width + 3px of padding on the left and right + 1px border on the left and right, by adding box-sizing:border-box; the 70% width you set includes the border and padding.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
