please look at this link
http://sudhakargolakaram.co.in/image.html

my question is how to place the image which has a curve design starting from the left till the right along with the 3 square images in between

keeping this image aside the width of the wrapper is 825px which is fine
the 1st div after the wrapper has content within the dark green at the very top and its width is the same as the wrapper which is 825px and the div after this are also 825px


in order to have this curve image whose width is 1204px and height 266px as the 2nd div is what i need help with

as of now my code is
#wrapper {
width: 825px;
margin: 0 auto;
}

#contentwrapper{
float: left;
width: 825px;
height: 1900px;
}

#toprowouter{
float: left;
width: 825px;
height: 25px;
}
#menu{
float: left;
width: 825px;
height: 57px;
color: #fff;
}

and code for other divs


just for the sake of this 1 image with 1204 X 266 i guess it is really not needed to change the wrapper to
#wrapper{
width: 1204px;
margin: 0 auto;
}

and there after all the other divs will need to have a width of 1204px and i will have to apply padding on left and right to a container div so that the actual content will have a width of 825px

how is it possible to have the image with 1204 X 266 sit inside the wrapper whose
width is set to 825px or should i change the wrapper width to 1204px just because of this big image

please provide the code for this

thanks.

You see, you are thinking in "tables" there rather than looking at the overall layout.

Is the content going to be in the "white" area?

i have not reached till that stage i have just created the wrapper and 2 divs after the wrapper

How can you create a design, then hope to create a layout if you don't know where the content is going to be in the finished layout?

Originally Posted by sudhakararaog

and there after all the other divs will need to have a width of 1204px

No. The wrapper doesn't need to have a width.

how is it possible to have the image with 1204 X 266 sit inside the wrapper whose

Your site should be split into #header/#content/#footer with the #wrapper outside them.

The wrapper has no width set. Set the #header to the width of the image with margin: auto. Set the #content/#footer to your 825px with margin: auto.

thanks for replying

i have created a wrapper1 which has width 825px margin: 0 auto and then wrapper2 with width of 1205px margin: 0 auto which is the width of the image and this wrapper2 has no content and has the image whose width is 1205px as a background top left

and for the remaining content i have used wrapper1 with a width of 825px and the layout is working fine

so all the content within wrapper1 is 825px margin : 0 auto and
all the content within wrapper2 is 1205px margin : 0 auto and this wrapper2 has only the image which has a width of 1205px



also a question for the body i have used the green background image with repeat-x which has 4 shades of green starting from top to bottom. as per the design each green block has a content associated with it. so should i set the height of each div with the height of each green block, if i do this and if the content increases then that can be an issue correct