<div>
I think that may help. 
You stil need to work on the colours and eventually create/modify css classes but other than that I guess it should be ok. 
 
Tell me if you need more. 
 
NB: On an accessibility point of vue that's a terrible way to do round courners but I guess you already know that. 

<pre><code class="code-100 nolinks" id="code-262930">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;wsdsd&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
.spiffy{display:block}
.spiffy *{
 display:block;
 height:1px;
 overflow:hidden;
 font-size:.01em;
 background:#FFFFFF;
 }
.spiffy1{
 margin-left:3px;
 margin-right:3px;
 padding-left:1px;
 padding-right:1px;
 border-left:1px solid #8ec6d3;
 border-right:1px solid #8ec6d3;
 background:#cde6ec;
 }
.spiffy2{
 margin-left:1px;
 margin-right:1px;
 padding-right:1px;
 padding-left:1px;
 border-left:1px solid #4da5ba;
 border-right:1px solid #4da5ba;
 background:#d9ecf0;
 }
.spiffy3{
 margin-left:1px;
 margin-right:1px;
 border-left:1px solid #d9ecf0;
 border-right:1px solid #d9ecf0;
}
.spiffy4{
 border-left:1px solid #8ec6d3;
 border-right:1px solid #8ec6d3;
}
.spiffy5{
 border-left:1px solid #cde6ec;
 border-right:1px solid #cde6ec;
}
 
.spiffyfg{
 background:#FFFFFF;
 padding-top:15px;
 padding-left:15px;
 padding-right:15px;
 padding-bottom:15px;
 width:600px;
}
 
 body { color:#222222; font-family:&quot;Trebuchet MS&quot;,&quot;Lucida Grande&quot;,Verdana,Georgia,Sans-Serif; font-size:76%; background-color: #3a9bb3; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; -x-system-font:none;}
 
 
.spiffy6{display:block}
.spiffy6 *{
 display:block;
 height:1px;
 overflow:hidden;
 font-size:.01em;
 background:#63CBE5;
 }
.spiffy7{
 margin-left:3px;
 margin-right:3px;
 padding-left:1px;
 padding-right:1px;
 border-left:1px solid #8ec6d3;
 border-right:1px solid #8ec6d3;
 background:#cde6ec;
 }
.spiffy8{
 margin-left:1px;
 margin-right:1px;
 padding-right:1px;
 padding-left:1px;
 border-left:1px solid #4da5ba;
 border-right:1px solid #4da5ba;
 background:#d9ecf0;
 }
.spiffy9{
 margin-left:1px;
 margin-right:1px;
 border-left:1px solid #d9ecf0;
 border-right:1px solid #d9ecf0;
}
.spiffy10{
 border-left:1px solid #8ec6d3;
 border-right:1px solid #8ec6d3;
}
.spiffy11{
 border-left:1px solid #cde6ec;
 border-right:1px solid #cde6ec;
}
 
.spiffyfg2{
 background:#63CBE5;
 padding-top:15px;
 padding-left:15px;
 padding-right:15px;
 padding-bottom:15px;
}
 
.spiffyfg3{
 background:#FAA21A;
 padding-top:15px;
 padding-left:15px;
 padding-right:15px;
 padding-bottom:15px;
}
			 
&lt;/style&gt;
 
 
 &lt;/head&gt;
 
 
 &lt;body&gt;
 &lt;div style=&quot;width: 630px; margin:0 auto;&quot;&gt;
 &lt;b class=&quot;spiffy&quot;&gt;
 &lt;b class=&quot;spiffy1&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy2&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy3&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy4&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy5&quot;&gt;&lt;/b&gt;&lt;/b&gt;
 
 &lt;div class=&quot;spiffyfg&quot;&gt;
		 &lt;b class=&quot;spiffy6&quot;&gt;
		 &lt;b class=&quot;spiffy7&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
		 &lt;b class=&quot;spiffy8&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
		 &lt;b class=&quot;spiffy9&quot;&gt;&lt;/b&gt;
		 &lt;b class=&quot;spiffy10&quot;&gt;&lt;/b&gt;
		 &lt;b class=&quot;spiffy11&quot;&gt;&lt;/b&gt;&lt;/b&gt;
		 &lt;div class=&quot;spiffyfg2&quot;&gt;
				some content here....
			&lt;/div&gt;
			&lt;div class=&quot;spiffyfg3&quot;&gt;
				some other content here....
			&lt;/div&gt;
		 &lt;b class=&quot;spiffy6&quot;&gt;
		 &lt;b class=&quot;spiffy11&quot;&gt;&lt;/b&gt;
		 &lt;b class=&quot;spiffy10&quot;&gt;&lt;/b&gt;
		 &lt;b class=&quot;spiffy9&quot;&gt;&lt;/b&gt;
		 &lt;b class=&quot;spiffy8&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
		 &lt;b class=&quot;spiffy7&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;&lt;/b&gt;
 &lt;/div&gt;
 
 &lt;b class=&quot;spiffy&quot;&gt;
 &lt;b class=&quot;spiffy5&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy4&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy3&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy2&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy1&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;&lt;/b&gt;
&lt;/div&gt;
 
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>

<div>
&quot;NB: On an accessibility point of vue that's a terrible way to do round courners but I guess you already know that.&quot; 
 
I don't know what that means! Im not on the up and up on web dev, can you explain? One sad thing - the whole reason I decided to use &lt;div&gt; with rounded corner was because iphone+mobile safari renders a 1 pixel gap between &lt;table&gt; cells - so now I try rendering the rounded &lt;div&gt; content in my original post on iphone - and there is a 1 pixel translucent border at the top and bottom of my &lt;div&gt; content area! This is madness! 
 
Thanks
</div>

<div>
By the way, let me (quickly) explain what is accessibility and what was the problem: 
 
- Accessibility is a general term used to describe the degree to which a product (e.g., device, service, environment - here a website) is accessible by as many people, browser, OS, etc as possible. 
 
- One of the main rules to maintain accessibility while building a website is to separate content from presentation. This is why we use html (or xhtml) to provide the content, and css to make it look nice. 
 
What we were doing with all these &lt;b&gt; (for &quot;bold&quot;) was wrong because we were misusing an html tag (content oriented) to manage a presentation stuff. 
Once you'll externalize the css instructions from the code I gave you (and also eventually the JavaScript), you'll see you have in your html file only the relevant content of your page. 
 
Then, for you, it will be easier to manage content on one side, and presentation on the other side.
</div>

<div>
<div class="content wysiwyg-content">
Hi, 
 
With the help of experts here, i have a simple html layout which is a rounded corner content layout (working code attached). 
 
I'd like to finish this off by adding another 2 boxes with rounded corners inside the current content &lt;div&gt; at the top. I'm basically trying to recreate this page layout: 
 
&nbsp; &nbsp; <a href="http://topwpthemes.com/simplyorange/" rel="ugc">http://topwpthemes.com/simplyorange/</a> 
 
named &quot;simplyorange&quot;, (you can hit the preview button to see what it looks like). It is a wordpress theme, but it does not display correctly on iphone mobile safari and wordpress is too slow for my purposes, so I jsut wanted to make this simple static version of it. 
 
How can I create the bright blue and orange rounded boxes inside the current content div I already have? After that it's done, 
 
Thanks for any help 

<pre><code class="code-10 nolinks" id="code-262873">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
.spiffy{display:block}
.spiffy *{
 display:block;
 height:1px;
 overflow:hidden;
 font-size:.01em;
 background:#FFFFFF;
 }
.spiffy1{
 margin-left:3px;
 margin-right:3px;
 padding-left:1px;
 padding-right:1px;
 border-left:1px solid #8ec6d3;
 border-right:1px solid #8ec6d3;
 background:#cde6ec;
 }
.spiffy2{
 margin-left:1px;
 margin-right:1px;
 padding-right:1px;
 padding-left:1px;
 border-left:1px solid #4da5ba;
 border-right:1px solid #4da5ba;
 background:#d9ecf0;
 }
.spiffy3{
 margin-left:1px;
 margin-right:1px;
 border-left:1px solid #d9ecf0;
 border-right:1px solid #d9ecf0;
}
.spiffy4{
 border-left:1px solid #8ec6d3;
 border-right:1px solid #8ec6d3;
}
.spiffy5{
 border-left:1px solid #cde6ec;
 border-right:1px solid #cde6ec;
}
 
.spiffyfg{
 background:#FFFFFF;
 padding-top:15px;
 padding-left:15px;
 padding-right:15px;
 padding-bottom:15px;
 width:600px;
}
 
 body { color:#222222; font-family:&quot;Trebuchet MS&quot;,&quot;Lucida Grande&quot;,Verdana,Georgia,Sans-Serif; font-size:76%; background-color: #3a9bb3; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; -x-system-font:none;}
 
&lt;/style&gt;
 
 
 &lt;/head&gt;
 
 
 &lt;body&gt;
 &lt;div style=&quot;width: 630px; margin:0 auto;&quot;&gt;
 &lt;b class=&quot;spiffy&quot;&gt;
 &lt;b class=&quot;spiffy1&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy2&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy3&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy4&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy5&quot;&gt;&lt;/b&gt;&lt;/b&gt;
 
 &lt;div class=&quot;spiffyfg&quot;&gt;
 some content here....
 &lt;/div&gt;
 
 &lt;b class=&quot;spiffy&quot;&gt;
 &lt;b class=&quot;spiffy5&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy4&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy3&quot;&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy2&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;
 &lt;b class=&quot;spiffy1&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;&lt;/b&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>

Hi,

With the help of experts here, i have a simple html layout which is a rounded corner content layout (working code attached).

I'd like to finish this off by adding another 2 boxes with rounded corners inside the current content <div> at the top. I'm basically trying to recreate this page layout:

 http://topwpthemes.com/simplyorange/

named "simplyorange", (you can hit the preview button to see what it looks like). It is a wordpress theme, but it does not display correctly on iphone mobile safari and wordpress is too slow for my purposes, so I jsut wanted to make this simple static version of it.

How can I create the bright blue and orange rounded boxes inside the current content div I already have? After that it's done,

Thanks for any help

Rounded &lt;div&gt; corner inside another &lt;div&gt;

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Rounded &lt;div&gt; corner inside another &lt;div&gt;

Rounded <div> corner inside another <div>