Home/ Questions/Q 8012563
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T19:21:49+00:00

I’m working in eclipse with the Web Tools Platform, which provides a WYIWYG-feature. Now

  • 0

I’m working in eclipse with the Web Tools Platform, which provides a WYIWYG-feature. Now I got the problem, that two -containers are not shown in the same line. The really weird thing is, that when I export the file to desktop and open it with my browser, de two containers are shown in line, but there are no margins. Why are there two different looks? I mean, it is possible that the eclipse plug-in doesn’t work well, but at the latest when I open the file in browser, it should display what I code or not?

Here are two pictures of what I want to explain:

enter image description here

enter image description here

here is the html-file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="mainStyle2.css" />
<title>title</title>
</head>
<body>
    <div id="container">
        <div id="header"><b>main title</b></div>

        <div id="navigation" style="float:left">
            <b>Navigation</b> <br /><hr />
            Welcome<br />
            Team<br />
            Links<br />
            Screenshots<br />
        </div>
        <div id="contCont" style="float:left">
            Content
        </div>
    </div>
</body>
</html>

… and the css-file:

@CHARSET "ISO-8859-1";

#container{         background-color:#00FF59;
                    width:1200px;}

#header{            background-color:#99FF99;
                    text-align:center;
                    font-family:bookman old style;
                    font-size:50px;
                    margin-top:20; margin-bottom:10;
                    margin-left:20; margin-right:20;}

#navigation{        background-color:#99FF99;
                    width:200px; height: 800px;
                    font-family:bookman old style;
                    font-size:20;
                    margin-top:10; margin-bottom:10;
                    margin-left:20; margin-right:20;}

#contCont{          background-color:#99FF99;
                    width:1000px; height: 800px;
                    font-family:bookman old style;}

NOTE: I already tested it with float:left in both “navigation” and “contCont”, but there was no changing.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The WYSIWYG that IDEs provide are generally not very trustable.

    Either way, try this: 

    #navigation{        background-color:#99FF99;
                width:200px; height: 800px;

                font-family:bookman old style;
                font-size:20px;
                margin-top:10px; margin-bottom:10px; float: left;
                margin-left:20px; margin-right:20px;}

#contCont{          background-color:#99FF99;
                width:960px; height: 800px; float:right;
                font-family:bookman old style;}

    Also wrap the navigation and contCont in another div.

    Another thing to note is that browsers have default styles for html tags. You should be resetting them for example:

    *{
margin: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-weight: normal;
font-style: normal;
}

    Another thing that I noticed that for your margins, you are not specifying any units? Fixed it on the original code at the top. That’s why the margins wont display in a real browser.

    Also as previously mentioned, your container is too small because you are not taking in the margins.

    • 0