1 Replies - 964 Views - Last Post: 25 November 2009 - 01:21 PM

#1 sudhakararaog  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 14-August 09

question about css layout

Posted 25 November 2009 - 12:08 PM


at my workplace they have asked me to create a simple html page which will be used as a small widget in a website. as per the requirement in the html file. i should not use an external stylesheet and also no embedded style however i should write the page completely using inline css. all this is fine.

however my question and issue i am facing is with adjusting height as the content increasing when i give for example margin or padding.

please check out this link where i have created an image of what i am creating as html page using inline css.

as per the image there is an outer div which has the light blue background color which i have created like a container div with the background color

the dark blue rectangles are 3 images and the white color on the right with the rounded rectangle at the top and bottom is where content like header tag, img tag, forms etc will be used.

lets say for example i divide the images and content as 2 divs floating left with images div as 100px and content on the right as 300px width so a total of 400px and a total height of 300px

based on the design that i have the total width is 400px (left div with images=100px and right div with content=400px) and total height is 300px for example.

i am ok with the left div as the images have a fixed width and height, the problem i am facing with is the content div.

as the content div contains header tags, a small paragraph information within p tag, a small form with about 2 to 3 form fields, in order to add all these elements as per the design i am using padding top, padding bottom and if needed margin top and margin bottom. so due to this the content may go beyond the bottom div which has the rounded rectangle at the bottom, and this is not how it should appear the entire content should sit inside the 300px height in the right div

so do i have to keep subtracting the amount of padding and margin i am using from the height value of the right div so that the content sits inside within the total 300px height.

how do i go about this height aspect which i am having issue with and also is there something specific that i have to keep in mind for ie6 browser.

for the left and right div do i have to use
float: left;
width: 100px;
height: auto;

float: left;
width: 300px;
height: auto;

or do i have to specify the fixed height which is 300px for #left and #right divs

also in the #right div i am using 3 inner divs
1 for top rounded rectangle background =
 { background: url(topbg.jpg no-repeat; width:300px; height: 10px; } 

2nd div with white background color no background image= do i have to specify a fixed height for this 2nd div =
 { width:300px; height:; }

3rd for bottom rounded rectangle background image =
 { background: url(bottombg.jpg no-repeat; width:300px; height: 10px; }

any help will be greatly appreciated.


Is This A Good Question/Topic? 0
  • +

Replies To: question about css layout

#2 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: question about css layout

Posted 25 November 2009 - 01:21 PM

You can define a height

Then after that just set the padding and margin to 0 for the container.
You can add padding and margins to the contents inside of the box separately by using code like this.
#contents h1,h2,h3 {
padding-top: 10px;
#contents p {

For the general design and layout of the coding you are going to want to have one of the sides (left or right) set up as a sidebar. This means that only one will contain a float property.

contents {

left-images {
width 100px;

container {

I hope this help, I have subscribed to the topic and will be able to help you as you go along.

This post has been edited by calebj: 25 November 2009 - 01:21 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1