Html/css Css Boxes And Positioning

I have a CSS greybox: (When I say greybox, I mean the CSS box I have created that I have made with the color grey as you can see down below.) .navigation-div { margin-top: 14px

Solution 1:

There are a few problems with your code. First, you should not nest anchors (<a>) in other anchor elements. Using margin to position elements is not a good idea, you are already trying to use inline-block to change default block display of headers and at the same time you are floating one of your inline-block elements to the right.

Adding big margin to the element makes the element use more space and moves next inline element to the new line if it cannot fit in one line with other elements.

If you want to position all your menu items to the right you can use text- align:right on your inline-block elements to stick them to the right.

If you want your mail element be on the right you may stick to using float:right on it, but it would also be easier to just place mail element as the last one in the nav

You can nest anchors <a> inside headers <h1> to create links inside headers

<h1id="mailtext">Mail Us <ahref="mailto:info@email.com"><imgid="mailpicture"src="images/gmail.png"></a></h1>

http://jsbin.com/kazocekoba/1/

.navigation-div
{
    margin-top: 14px;
    box-shadow: 0px0px10pxrgba(0,0,0,0.47);
    padding: 0;
    color: #E3E3E3;
    background-color: #333;
    
    text-align: right;
}
#mailtext
{
    margin-top: 20px;
    display: inline-block;
   /* margin-left: 1230px;*/font-size: 20px;
    color: white;
    font-style: italic;
}

#mailpicture
{
    display: inline-block;
    margin-top: 16px;
    float: right;
}

#nava
{
    font-size: 20px;
    color: white;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
    display: inline-block;
    /*margin-left: 500px;*/
}

/* use padding to separate your navigation elements */.navigation > * {
  padding-left: 2em;
}

<divclass="navigation-bar"><aclass="navigation-div-blur"><divclass="navigation-div"><navclass="navigation"><!-- --><ahref="mailto:info@email.com"><imgid="mailpicture"src="images/gmail.png"></a><h1id="mailtext">Mail Us</h1><h1id="nava">test</h1></nav></div></a></div>

A bit better solution http://jsbin.com/xunokaviju/1/

.navigation-div
{
    margin-top: 14px;
    box-shadow: 0px0px10pxrgba(0,0,0,0.47);
    padding: 0;
    color: #E3E3E3;
    background-color: #333;
    
    text-align: right;
}
#mailtext
{
    margin-top: 20px;
    display: inline-block;
   /* margin-left: 1230px;*/font-size: 20px;
    color: white;
    font-style: italic;
}

#mailpicture
{
    display: inline-block;
    margin-top: 16px;
    
    /*float: right;*/
}

#nava
{
    font-size: 20px;
    color: white;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
    display: inline-block;
    /*margin-left: 500px;*/
}

/* use padding to pad elements */.navigation > * {
  padding-left: 1em;
}

<divclass="navigation-bar"><aclass="navigation-div-blur"><divclass="navigation-div"><navclass="navigation"><!-- --><h1id="nava">test</h1><h1id="mailtext">Mail Us <ahref="mailto:info@email.com"><imgid="mailpicture"src="images/gmail.png"></a></h1></nav></div></a></div>

Solution 2:

In #mailtext the margin-left:1230 is the problem. Keeping your code just as it is the only change you'll have to make looks like this:

#mailtext
{   
    float: right;
    font-size: 20px;
    color: white;
    font-style: italic;
}

Solution 3:

change your

#mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;   
font-size: 20px;
color: white;
font-style: italic;
}

to

#mailtext
{
margin-top: 20px;
display: inline-block;
float:right;
font-size: 20px;
color: white;
font-style: italic;
}

Hope it solves your problem