April 29, 2011
How to layout follow content using CSS?
Question by Tattat
Here is the layout I would like to make:
‘input’ is 70% width of the screen.
and the ‘second input’ is 70% width of ‘input’.
‘button’ is 30% width of ‘input’.
‘input’ is in the middle of the screen.
How can I do so? Thank you.
Answer by Starx
Do not think this require any special skills. This is a very basic fluid layout. An example
Markup
<div id="wrapper">
<input type="text" id="firstrow_textbox" />
<input type="text" id="secondrow_textbox" />
<input type="button" id="secondrow_button" />
</div>
CSS
#wrapper {
width: 70%;
}
#firstrow_textbox { width: 100%; }
#secondrow_textbox { width: 70%; }
#secondrow_button { width: 28%; } /* Due to border and all */
