Thanks for your reply.
I tried float property but finally I found it is because that my left
div occupies 30% and right div occupys 70%, furthermore I still have a
margin 10px to leave a gap between these two div so the width is more
than 100% which causes the right div goes to the bottom of left div.
I still have problem with put 2 divs side by side, I am sorry I have no
link to show you my web page. I will paste the code here, see if you
can help with this problem, this code is child page that using master
page, the master page contains left and right div I talked above.
No it is the content inside the right div.
I have <div roundheaderand <div roundbodythese two are vertical,
this works fine, and I am using javascript to get the round corner make
up.
Inside <div roundbody, I have two gridview (or something else that I
may put them vertical, horizontal...etc. I am still using table here to
put these two gridview horizontally since div content does not do the
job here, I know something wrong with my div content, but could not
figure out why.
Thanks a lot
Styles.css
div.roundbody{clear:left;padding: 2px 0px 0px 0px; margin: 0px 0px 4px
0px; background-color: #e7e7e7;}
div.roundheader{margin: 0 0 0 0;background-color: #660000; padding:
0px 0px 4px 0px}
div.content
{
background-color: Transparent;
margin: 0px;
border: solid 2px #ffff00;
float: left;
clear: both;
}
-------------------------------------
aspx
-----------------------------
<asp:content contentplaceholderid="PageContent" runat="Server">
<div class="roundheader">
<h1>header name</h1>
</div>
<div class="roundbody">
<!--<div class="content">-->
<table cellspacing="0" cellpadding="2" border="0" width="100%">
<tr>
<td valign="top" style="width:48%">
<asp:GridView/>
</td>
<td style="width:2%"></td>
<td style="width:48%">
<asp:GridView/>
</td>
</tr>
</table>
</div>
Przemek Ptasznik wrote:
rockdale wrote:
While, I am working on change my pages to tableless layout. My page
contains a nav menu on the left and content on the right, but the right
content contents lots of controls(gridview, checkbox...etc). I am using
<div-left/><div-right/>, should be the samplest one, but I never get
the <div-right/to position at the right of div-left, it always under
<div-left/>
Did you try float:left (or right) css property?
Ask google about css columns - there are a lot of useful examples.
And don't think about tableless designs as div-and-span-based
alternative to tables. Rather think about semantically valid (x)html
which can be read by any browser(including screen readers). Build your
html code using elements to express what its content means and not what
it must look like.
Pass a link to your page - it will be much easier to us to help you with
css problems.
--
PP