Journal style for the divs

CSS website design using divs tutorial: How to set the div in the center of a web browser using margins Adding child divs to a parent div Divs position Floating divs Journal style for divs Understanding offsets Minimal 2-columns website layout

In this tutorial so far I’ve tried not to use “spaghetti markup” code which looks like this:

<div id="A">A text
   <div id="B">B text</div>
</div>
<!-- or -->
<div id="A">
   <div id="B">B text</div>
   A text
</div>

But sometimes you need to use it to achieve the journal layouts:

<html> 
<head> 
<style type="text/css">

div#B {float: right; width: 10em; margin: 0.5em; padding: 0.5em; border: 1px solid;}

</style> 
</head>
<body>
<div id="A">
text text text text text text text text text text text text text text text text text text text text 
<div id="B">journal float right</div>
text text text text text text text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text text text text text text text 
</div>
</body>
</html>

In case of journal layouts you must mix up your text with the markup. If you somehow manage to do the same without using “spaghetti markup” please let me know the technique.

In the next article I will introduce you with the mister Offset.

…

tags: & category: -