How to control the postioning of a fieldset with css?
Tags: html,css,forms,positioning,fieldset
Problem :
I have the following code:
<fieldset>
<legend>
<strong>Personal Information</strong>
</legend>
<ul>
<li>
<label for="first_name">First Name</label><br />
<input type="text" id="first_name" name="first_name" value="" maxlength="30" />
</li>
...
</ul>
</fieldset>
<fieldset>
<legend>
<strong>Car Information</strong>
</legend>
<ul>
<li>
<label for="car_make">Make</label><br />
<input type="text" id="car_make" name="car_make" value="" maxlength="30" />
</li>
...
</ul>
</fieldset>
Right now everything is on the left hand side where the second fieldset (car information) is right below the first fieldset (personal information).
I would like the car information fieldset to be on the right hand side of the personal information fieldset so they are side by side. Using css, how would I do this?
Solution :
Since fieldsets are considered blocks, you need to use
fieldset {
width: 200px;
float: left;
}
Or whatever you want for the width of the fieldsets.
CSS Howto..
It can be accomplished using JavaScript like so: <style type="text/css"> td { border: black 1px solid; text-align: center; padding-left: 5px; padding-right: 5px } tr:hover td { background-color: #DDDDDD; } th...
This is actually done with CSS and Javascript: <ul id='menu'> <li><a href="#web_search" class='active'>Web</a></li> <li><a href="#image_search">Image</a></li> <li><a href="#video_search">Video</a></li> <li><a...
Try this: @media (max-width: 715px) { .setDim { min-height: inherit; max-height: inherit; } } ...
Best thing to do is to put everything into an external css file. If you must have inline styling then make sure you only have ones that aren't already defined...
You could use the q element instead of quotation marks, since browsers are supposed to add language-specific quotation marks, provided that the language is indicated in markup, e.g. with <html...
This is more of a math question rather than programming, but what you should basically do is is calculate the x and y differences between your character and its target,...
Maybe I'm misunderstanding your question, but I think you are looking for the [attribute=value] selector. Here you can find examples CSS [attribute=value] Selector In your case, I think you should...
I agree that the calculation of the width of the grid is not perfect in case of usage of autowidth: true. Nevertheless the problem which you describe is not a...
The <p:inputTextarea> is wider than the <p:panelGrid> and therefore pushing it far outside the specified width. You need to set the width on the <p:inputTextarea> as well. <p:inputTextarea style="width: 50px;"...
You can add the following: #header-home-nav { width: 100%; } Then, give the child (#menu) some kind of max-width and auto margins: #menu { background: #1B1B1B; margin: 0 auto; max-width:...
As I saw you started out with display: table-cell on navMenu I continued with that. I added 2 wrappers, navLogo and navLogin with display: table-cell and then I added display:...
Syntax Error on border: The border won't take individual width. Please declare this way: border: 1px solid #155678; border-width: 1px 1px 5px 1px; ...
I was able to remove the extra line; however, I have not yet found a way to keep the value in the center without the number moving as the bar...
Yes, yes it can. Assuming you only have one video, you need to take a screenshot of the first frame and save it as an image. In Javascript, you want...
This should work. var value = $('#id').get(0).style.width; var hasPx = value.indexOf('px') >= 0; var hasPct = value.indexOf('%') >= 0; JSBin: http://jsbin.com/asewit/2/edit#javascript,html...
Try changing the width to something smaller than 670px in your first rule there, and change the padding to a smaller value if needed.
like this: HTML <nav> <img src="image.png" alt="image"> </nav> CSS nav{ position:relative; } nav img{ position:absolute; top:0; right:0; } ...
You can simulate it, doing like this: CSS span{ text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff; } DEMO HERE...
As far as the browser is concerned, an HTTP resource is an HTTP resource and it is irrelevant if the server produced it by reading a file from a hard...
No, there is no concept of padding/margin for background images. Options: 1) Positioning the background (as already stated). The key is that the container would have to have fixed dimensions....
You first have to load you font in the document's head and than use the font in conjunction with the right font-weight in your CSS. PS: You got a little...
Install node.js and npm (I used homebrew to install node.js and the instructions at http://npmjs.org/ to install npm) Install the command-line less compiler with npm install --global less Add...
So... Assuming this (ugly) markup : <meta name="viewport" content="width=device-width, initial-scale=1"> <body> <div> <div> <div></div> <div></div> </div> </div> </body> The two last div are your menu and your content. Then, the...
The threads linked in comments are helpful but I don't think this is an exact duplicate because this one is slightly more complex due to the need for multiple rings....
This is the default behavior of the image. There is about a 2px gap under the image for the letter descenders/the image lines up with the baseline of the text....
Try the nth-childselector: .fieldSetDropDown:nth-child(1) { left:40% } .fieldSetDropDown:nth-child(2) { left:50% } .fieldSetDropDown:nth-child(3) { left:60% } BTW: You have a typo in your HTML: "classs" must be "class"...
Try this working in all browser. background: #184c82; /* Old browsers */ background: -moz-linear-gradient(top, #184c82 0%, #022243 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#184c82), color-stop(100%,#022243)); /*...
You do it the same way you use CSS to control anything else: put it in a div, give it a class (or id), and format the parent object. Are...
Use position:absolute if you need it centred both horizontally and vertically: #box { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; /* etc */ } http://jsfiddle.net/wcFMw/...
There are a number of problems with printing from within a browser. A lot of the printing-specific stuff doesn't work on most browsers and even where it's supported by multiple...