PDA

Click to See Complete Forum and Search --> : Putting divs inside divs

r0k3t
04-10-2008, 02:33 PM
Hi there,

I am having serious trouble today... I have done variations of this theme several times but I can't seem to figure out what the problem is. I need to get the two divs with the dashed borders to go inside the div with the green solid border... For the life of me I can't get it right, err - I hate these days...

The code is below - I has to be something simple... If you can point out my error I would appreciate the help. OH! I am testing on firefox.

Thanks!


<html>
<head>
<title>Testing stuff</title>
</head>

<body>
<div style="border: solid 2px green; width: 700px; height; 100px">
<div style="height: auto; width: 400px; float: left; border: dashed 1px red; display: inline;">
XXX
</div>
<div style="height: auto; width: 200px; border: dashed 1px gray; float: left; display: inline;">
XXX
</div>
</div>
</body>
</html>
aj_nsc
04-10-2008, 02:38 PM
Explained in full at the url below:
http://nunos.zi-yu.com/?p=76
r0k3t
04-10-2008, 03:12 PM
Wow - thanks... I figured it out but that is a cool link.

This is what the final code ended up like for any other traveler who might stumble upon this and have the same question...


<div style="height: 70px; width: 700px;">
<div style="height: 65px; width: 500px; float: left">
<asp:Label ID="PageDescriptionLabel" runat="server" Text="Label" CssClass="focusSearchResultsText" />
</div>
<div style="height: 65px; width: 100px; float: left;" >
<asp:Image ID="SearchImage" runat="server" ImageUrl="~/Images/search_64x52.png" />
</div>
</div>


Obviously that is in an ASPX page but the style part is the same. Note the use of float left in both divs... which is pointed out in that link!