April 29, 2011

How to layout follow content using CSS?

Question by Tattat

Here is the layout I would like to make:

Layout example

‘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 */

Demo

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!