I currently have a fieldset which must take 96% of my container. This fieldset must have his elements centered but also aligned, so for example all the labels must end at the same spot and all the inputs must begin at the same spot.
This was fairly easy without the whole center problem with this code (JSFiddle):
.formulaire
{
margin: 1em auto;
border-style: solid;
border-width: 1px;
border-color: #B0B0B0;
padding: 1em;
}
.formulaire label
{
float: left;
width: 25%;
text-align: right;
}
I've tried to put my fieldset inside a div with text-align center, however it simply centers everything and doesn't align anything.
Any help would be greatly appreciated
Thanks !
Yes you can wrap your form fields in a div, set the width to the longest label/field combination and then center that div with margin:0 auto;
Here is the example
Related
http://jsfiddle.net/hga7Lxt8/1/
float: right;
margin-left: 10px;
There is no margin to the left of the orange-red box (the top borders of the rows reach right up to it), even though it has such style attribute. What is wrong?
You can see the real problem when you apply a semi-transparent background-color.
What you need to understand is that content floats around a floating element, not containing boxes (unless they also float or have a display property set to something other than block).
You fix it by setting margin-right: 110px; on your .row:
http://jsfiddle.net/hga7Lxt8/4/
What you want to achieve can only be faked and would not "work" if your floating element has any transparency (or box-shadows).
The row elements are continuing behind the orangered box. Try:
.right {
float: right;
width: 100px;
height: 100px;
background: orangered;
}
.row {
border-top: 1px solid;
overflow: auto;
margin-right: 110px;
}
http://jsfiddle.net/thrb5936/
and sorry I can't properly translate my question into easier language, sorry :(
body
{
background: #33ffcc;
min-height: 100%;
margin-top: 3em;
}
#kal
{
font-size: 2em;
color: #fff;
border: 3px solid #fff;
text-align: center;
}
but here:
http://jsfiddle.net/skinnytotoro/s3Xfp/
and notice the box border is changing everytime the screen size change?
and I want to make the border is fixed, like, 20px from left and right of the text
is there how and any way to do so..?
thanks in advance!
sorry grammar errors too. Hope you don't get headache.
Use display: inline-block and set padding to how much space you want: http://jsfiddle.net/s3Xfp/1/
Another alternative way to get this working would be to set a fixed size div with margins to center the div, then manually set the padding.
#kal {
width: 180px;
margin: 0 auto;
padding: 0 20px;
}
http://jsfiddle.net/s3Xfp/6/
I'm not quite sure why, but i cannot for the life of me figure out why my div is offset to the right. I'm still a little confused on positioning so i may have made an error there.
Here's the code i have on my container div:
#box{
padding: 5px;
margin-left:auto;
}
If you take a look at the Fiddle i posted below you'll notice that there is more space on the left than the right. If you don't see it, try expanding the preview window. Any help is greatly appreciated, thanks!
http://jsfiddle.net/Ya6A3/1/
It's because the element .large was being absolutely positioned.
You would remove position:absolute from the element and add vertical-align:top to fix vertical alignment issues. It's worth noting that an absolutely positioned element is essentially taken out of the flow and doesn't take other element's position into consideration. The element was thus positioned relative to the box's containing block
UPDATED EXAMPLE HERE
.large {
margin-left: 25px;
vertical-align: top;
border: 2px solid;
margin-bottom: 15px;
display: inline-block;
border-radius: 25px;
background-color: black;
opacity: 0.4;
height: 42em;
width: 30em;
padding: 0;
}
As part of creating a typical left, mid, right column layout, I need to wrap some inner divs of various height into an englobing/parent div. I need to make sure the global/parent div is as high as the highest inner div, which depends of the text it contains. The min-height property won't cut it.
How should I proceed? Should I use tables and cells instead of divs?
I am including a JSFiddle to describe the issue.
I guess you want to achieve something like this: http://jsfiddle.net/Cj75q/3/
If I'm right you don't need all these relative and absolute positions, all you need is float left of the columns:
#leftCol {
background-color: #123456;
width: 23%;
margin: 0px;
border: 0px;
padding: 0px;
float: left;
}
#midCol {
background-color: #654321;
width: 50%;
margin: 0px 10px 10px 0px;
border: 0px;
padding: 10px;
float: left
}
#rightCol {
background-color: #567890;
width: 23%;
margin: 0px;
border: 0px;
padding: 0px;
float: left;
}
Please write your code here and then I think I can help you to find your solution.
In normal situation, the global div usually has the height of highest inner div. But I don't know what is your problem exactly.
I think this code can solve your problem. JSFiddle
But I suggest you to use table in this type of situations. Because the float and width properties on div tag can cause serious problems in some browsers.
I'm working on a new website and on one my pages I just cant get my #main div which is my page content's containing DIV to stretch long enough to cover the inner DIV's.
Please check it out and point out the parts of my CSS that need fixing. Many thanks to all.
#bikey; just right
#main {
background: none repeat scroll 0 0 #101010;
border-color: #333333;
border-style: solid;
border-width: 1px 1px 0;
margin: 15px auto 0;
overflow: hidden;
padding: 20px;
width: 920px;
}
The problem is in your #main div there are floated element's so you have to clear it first.
in the example above i write overflow:hidden & remove height:100%
Just remove height: 100% from layout.css at #main{...} (line 31 or so)
and add <br style="clear:both;" /> after <div id="content">...</div>