CODEWITHSUNDEEP
htmllayout
Muthu Ganapathy Nathan
Muthu Ganapathy Nathan

Reputation: 3307

Logical Grouping of content (layout) without using Tables

I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.

enter image description here

Problem : Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).

So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.

Upvotes: 1

Views: 103

Answers (3)

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Here is simple example for doing so,

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>StackOverFlow</title>
    <style type="text/css">

        .content{
            width:150px;
            height:100px;
            border:1px solid blue;
        }
        .content .text{
            display:block;
            border:1px solid red;
        }   
    </style>

</head>
<body>

    <div class="content">

        <div class="text">
            text here
        </div>

        <div class="text">
            another text here
        </div>

        <div class="text">
            yet another text here
        </div>


    </div>

</body>
</html>

Code Explanation

What i did is wrap text div inside content parent div and assign fixed width and height to parent div.

Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.

Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.

Upvotes: 1

Alicia
Alicia

Reputation: 1152

By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started: http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Upvotes: 1

adriendenat
adriendenat

Reputation: 3475

Looks like a perfect example usage of a grid system.

Without using a grid system, you can just use float: left for each of the div and it should be OK.

Upvotes: 2

Related Questions