Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px

When to exactly use position relative

Case 1

You have inner element that is positioned absolute and want that element to stick to it's parent. Than you apply position: relative to parent element. By default absolute element pops out from DOM flow and takes position from closest relative element (html by default)

Case 2

You want to move element but still keep it in DOM flow. Than apply position: relative and move it with left/right/top/bottom properties.

Case 3

You want to place one element over another. Static elements does not take effect of z-index that's why you need to set it's position to relative, static or fixed

There may be other use cases

.a {  background-color: #ddd;    left: 50px;  top: 150px;  position: relative;    width: 200px;  height: 200px;  text-align: center;}.absolute,.a div {    position: absolute;  left: 50px;  top: 50px;    width: 100%;  height: 60px;  background-color: rgba(250, 0, 0, .4);}

<div class="a">  HTML > relative  <div>HTML > relative > absolute</div></div>
<div class="absolute">HTML > absolute</div>

Div positioning|| Why does margin: property doesn't work yet the left: works?

The position Property

The position property specifies the type of positioning method used for an element.

There are four different position values:

static

relative

fixed

absolute

How Do They Differ?

1. if you are using static.
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

.static {  position: static;  border:solid 1px red;}

<div class="static">Hello i m static position </div>

CSS margin / padding / positioning issue

Edit:

Wondered how to update this answer, as there is a lot to talk about found it best to take it from bottom up. This will bring you to a layout like this:

Stage one demo.

The menu and logo should stay in place when you re-size the window etc.

Had a look at your code now. It is better, but you still have some trouble:

border is still set on image. Invalid markup.
repeat-xy is still used on background. Invalid property value.
#content still has padding without units. Invalid property value.
<br> tags are still used to make paragraphs in text.
There is an extra } after #content. Invalidates CSS file.

Number 4. should be fixed, but not that important right now.

As we already have discussed 1-3 it is hard to understand why you keep them. Invalid markup and styling makes for unreliable result.

It can look OK in one browser, in one version of one browser, look whack in another, and totally break in a third. You get misinformation between code and result. When or if you fix it to be valid other unexpected things may change and you have to do a lot more work to clean it up. As a whole and rule number one. No matter how wrong markup and styling might be seen from a how to do it perspective one have to keep invalid markup and style out of it.

To validate your work, and as you are where you are in regards to experience, do it all the time. Do small changes: validate. Do small changes: validate. And so on. Use:

For HTML
For CSS

Markup

The markup as it is now is not the easiest to style or get to behave good in a dynamic way. hr's is not the easiest to work with and vary between browsers. Do not use tables for menu's or styling. They are best left for what they are intended to: show tabular data. For your menu you can ask yourself: what is the menu; well, it is a list. A list of options for end-user to navigate trough the site. There is a lot of examples on the web using lists as menus. Search the web for CSS list menu etc. You can create nice looking, cross-browser reliable CSS only, (no JavaScript dependency), menus.

But let us start with the basic markup: You will usually find it good to wrap the whole page inside a wrapper. Then add sub-items into that. To position elements like your main menu, logo etc. it could be good to use a wrapper for each and position them by float, margins etc.

In general use margins and padding.

Page layout

Head Div Divider Div Content Div Footer Div

Head

Div float left Div float left LOGOmenu

Styling + markup

To make it easy for yourself use temporary borders and background colors to view how the various elements float around. Also use the browsers built-in tools to show various things like margins etc. This is invaluable.

Only remember that if you use borders, and you intend to remove them on finished product, they can take up space.

As an example you could have something like this:

Strong colored first attempt.

HTML:

<div id="wrap">
    <div id="head">
        <div id="logo">
            <a href="index.php">
                <img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
            </a>
        </div>
        <div id="menubar">MENU</div>
    </div>
</div>

CSS:

* {
    margin     : 0;
    padding    : 0;
}
body {
    font-family: Arial;
    height     : 100%;
    background : orange;
}
#wrap {
    position   : relative;
    background : pink;
    width      : 100%;
    height     : 100%;
}
#head {
    position   : relative;
    width      : 800px;
    height     : 131px;
    margin     : 100px auto 0 auto;
    background : blue;
}
#logo {
    position   : relative;
    width      : 431px;
    float      : left;
    background : red ;
}
#logo_img {
    width      : 439px;
    height     : 131px;
    float      : left;
}
#menubar {
    position   : relative;
    background : #fff;
    width      : 300px;
    float      : left;
    margin-top : 107px;
    padding    : 3px 0 3px 10px;
}

Note: I use a hard reset of margin and padding on all elements by:

* {
    margin : 0;
    padding; 0;
}

And then set margins and padding on tags and elements as I use them. Often find this to be a much easier way then the other way around. Remember that things like body also has padding etc. and often can result in undesired spacing.

This way you also get rid of the horizontal scroll-bar at bottom.

By using float on thing like logo and menubar the elements align nicely.

Next we can add the divider. Here we could use a div and set border for top and bottom. On content we use padding to make space between header, text and footer. We also add white border to top of content that aligns nicely with the divider.

Added divider, content and footer.

HTML:

<div id="divider"></div>
<div id="main_content">
    MAIN CONTENT
</div>
<div id="footer">
    FOOTER
</div>

CSS:

#divider {
    border-top   : 5px solid #353535;
    border-bottom: 3px solid #888;
}
#main_content {
    position   : relative;
    background : url('http://cupido.g6.cz/pictures/background.png');
    border-top : 2px solid #fff;
    padding    : 120px 0 130px 0;
}

Next we can add the content text and style it. Also added style to footer.

With content and styled footer.

HTML

<div class="content_text">
    <p>
        text text text ...
    </p>
</div>

CSS:

.content_text {
    margin     : 0 auto;
    width      : 700px;
    background : #fff;
    border     : 1px solid;
    padding    : 50px 30px;

}
.content_text p {
    font-size  : 16px;
}

Resize window etc. and see it floats nicely around.

Now it is time to add the menu. As mentioned earlier we can use list for the menu. It is much more suited for the task then a table. In that regard also note that a menu might have sub items, as such a list becomes the only sane option.

Also note on the menu: You likely do not want to style visited links with other color. But that is up to you of course.

With added menu and some re-styling on background colors etc.

HTML:

<ul>
    <li><a class="menu" href="smaler.php">úvodní stránka</a></li>
    <li><a class="menu" href="sluzby.php">služby</a></li>
    <li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>

CSS:

As we already have set margins and padding to 0 on all elements this is trivial:

#menubar ul {
    list-style : none;
}
#menubar li {
    padding    : 0 10px;
    float      : left;
}
a.menu {
    text-decoration : none;
    color      : #fff;
}
a.menu:hover,
a.menu:active {
    color      : #3cc8a8;
}

Remove helping colors etc. and we have a version 0.1 ready for further testing and expansion.

Result.
Result as one page.
Validated markup on result at W3C
Validated CSS on result at W3C

Original answer:

There is more then one problem. Firstly the markup:

XHTML

<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />

<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />

<img src="./pictures/header.png" width="439" height="131" border="0" alt="Sample Image">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="Sample Image" />

<hr class="main" /></hr>
Should be:
<hr class="main" />

Use paragraphs to group text, not:

Text<br/><br/>Text<br/><br/>Text ...

but:

<p>Text</p><p>Text</p><p>Text... </p>

CSS

Inline comments are not valid, use:

/* some comment */
Not:
// some comment

You are missing unit on most of your padding values. If a value is non-zero it needs a unit such as pt, px etc. Use:

padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;

If you do not, it has no/(should not have any) effect.

background-repeat does not have repeat-xy. Use:

background-repeat: repeat;
/* not */
background-repeat: repeat-xy;

or nothing at all, as that is the default.

Fix those first. Then set some color to your things so that it is easier to understand what you want. You can change them back later. Use red, blue etc.

Example.

Regarding zero width no break space bug, as displayed in Vim:

Sample Image

CSS position relative : width not considered

When the CSS position (in .second::before) is set to relative, the width (fixed in pixels) is not considered, only the vertical line is displayed and width is "forced by the browser" to 1 pixel.

A pseudo element is an inline element by default, setting position:relative will not change this thus you cannot apply width and height to the element. Then the borwser is not forcing the width to 1px, it's the border you have set that is equal to 1px. The height also isn't working and the height of the element and the border is defined by the font property.

Increase the height and you will see that nothing will change:

.first {
  background-color: #dc3545;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 20px;
  padding: 5px 10px;
  margin-top: 10px;
}

.second {
  background-color: #6f42c1;
  color: #fff;
  font-size: 1.2rem;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 10px;
  margin-left: 10px;
}

.second::before {
  content: "";
  top: -13px;
  left: -30px;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #000;
  border-radius: 0 0 0 0px;
  height: 600px;
  width: 50px !important;
}

<span class="first">First</span>
<span class="second">Second</span>

How to remove whitespace that appears after relative positioning an element with CSS

You can simply solve this by applying a negative margin that equals the width or height of the element.

For an element of 100px height that is positioned to the top you will apply margin-bottom:-100px;

For an element of 100px height that is positioned to the bottom you will apply margin-top:-100px;

For an element of 100px width that is positioned to the left you will apply margin-right:-100px;

For an element of 100px width that is positioned to the right you will apply margin-left:-100px;

cut & paste css snippets:

.top 
    {
    postion:relative;
    top:-100px;
    height:25px;
    margin-bottom:-25px;
    }
.bottom
    {
    postion:relative;
    top:100px;
    height:25px;
    margin-top:-25px;
    }
.left
    {
    postion:relative;
    left:-100px;
    width:25px;
    margin-right:-25px;
    }
.right
    {
    postion:relative;
    left:100px;
    width:25px;
    margin-left:-25px;
    }

And the reworked example code becomes then:

.thetext {    width:400px;    background:yellow;    border: 1px dashed red;    margin:50px;    padding:5px;    font-weight:bold;}.whiteblob{    position:relative;    top:-140px;    left:70px;    width:200px;    height:50px;    margin-bottom:-50px;    border: 4px solid green;    background:white;    font-size:2.5em;    color:red;    }.footerallowedwhitespaceinblue{    height:10px;    background-color:blue;}.footer{    background-color:grey;    height:200px;}

<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script></div><div class="whiteblob">     buy this!</div><div class="footerallowedwhitespaceinblue"></div><div class="footer"></div>

Absolute positioning ignoring padding of parent

First, let's see why this is happening.

The reason is that, surprisingly, when a box has position: absolute its containing box is the parent's padding box (that is, the box around its padding). This is surprising because usually (that is, when using static or relative positioning) the containing box is the parent's content box.

Here is the relevant part of the CSS specification:

In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.... Otherwise, the containing block is formed by the padding edge of the ancestor.

The simplest approach—as suggested in Winter's answer—is to use padding: inherit on the absolutely positioned div. It only works, though, if you don't want the absolutely positioned div to have any additional padding of its own. I think the most general-purpose solutions (in that both elements can have their own independent padding) are:

Add an extra relatively positioned div (with no padding) around the absolutely positioned div. That new div will respect the padding of its parent, and the absolutely positioned div will then fill it.
The downside, of course, is that you're messing with the HTML simply for presentational purposes.
Repeat the padding (or add to it) on the absolutely positioned element.
The downside here is that you have to repeat the values in your CSS, which is brittle if you're writing the CSS directly. However, if you're using a pre-processing tool like SASS or LESS you can avoid that problem by using a variable. This is the method I personally use.

Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px

When to exactly use position relative

Div positioning|| Why does margin: property doesn't work yet the left: works?

CSS margin / padding / positioning issue

Edit:

Markup

Styling + markup

Original answer:

XHTML

CSS

CSS position relative : width not considered

How to remove whitespace that appears after relative positioning an element with CSS

Absolute positioning ignoring padding of parent

Related Topics

Leave a reply