Try these two example given below:
Example1
The relevant style declarations in the header are:
body{ font-size: 100%; background-color: #ccddcc; color: #000; font-family: arial, helvetica, geneva, sans-serif; margin: 0 15%;}.box{ clear: both; width: 80%; background: #fff url(images/75pxWide.png) no-repeat; color: #000; padding: 1em; border: 2px solid #EFCE8C;}.sidebar{ float: right; width: 15em; font-size: 80%; border: 2px dotted #000; padding: 1em; margin-left: 75px; background-color: #f8eece; color: #000;}The in-line styles used in each demo are documented below those demos.
Each example uses the same basic mark-up:
<div class="box"> <div class="sidebar"> a floated box with some content </div> some content</div>Example:2Xhtml:
<body>
<div id="details">
<form method="post" action="this">
<div id="contentNameCont">
<label for="contentName">Content name:</label>
<input id="contentName" type="text" />
</div> <div id="defaultCulturesCont">
<label for="defaultCulture">Default culture:</label>
<textarea id="defaultCulture" cols="6" rows="4"></textarea>
</div>
</form>
</div>
</body>
CSS:
div#details { margin: 0% 0% 0% 40%; background-color: yellow; }
input, label { display: block; float: left; }
#details div { overflow: auto; width: 100%; margin-bottom: 5px; border: solid 1px black; }
