Horizontal space between divs

Question

I'm doing a webpage for a school project And I've run into this problem.

I have a div, which contains the header, and a div with the horizontal navigation bar. Between those divs there is a gap. I have read through my code and can't find out why.

No matter what I seem to do nothing works.

I have already set margin/padding to 0px on all elements without luck.

Here is the code:

asp/html

   <html xmlns="http://www.w3.org/1999/xhtml">
<link href="StyleSheet.css" rel="stylesheet" />
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper">
            <div id="header">
                <asp:Image ImageUrl="_res/Logo.png" runat="server" />
                </div><div id="menuBar">
                    <asp:Image ImageUrl="_res/menubar.png" runat="server" />
                </div>

                <asp:ContentPlaceHolder ID="cphMain" runat="server">
                </asp:ContentPlaceHolder>


        </div>
    </form>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #2e261e;
    background-image:url(_res/sides.png);
    background-repeat:repeat-x;
}

#wrapper {
    width: 960px;
    margin-left:auto;
    margin-right:auto;
}
#header {
    margin:0px;


}

#menuBar {
    margin: 0;

}

I have tried display:block, does nothing.. Sorry for the extremely poor phrased question.

Can you please post the code? if can use http://jsfiddle.net/ — huMpty duMpty, Mar 10 '14 at 16:08
"nothing works"... it would help if you told us exactly what you were trying to achieve. — freefaller, Mar 10 '14 at 16:08
Possible duplicate: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Paulie_D, Mar 10 '14 at 16:10
I have edited the qustion, I have no clue what the first half-assed qustion was anyways, my apologies. — Matt Baech, Mar 10 '14 at 16:31

score 0 · Answer 1 · edited Apr 09 '14 at 10:07

Unfortunately, I (personally) have never used ASP. However, from what I can gather, what you want to do is really simple in standard HTML. Here's my HTML code:

<div id="wrapper">
    <div id="header">
        <img src="http://s26.postimg.org/vqdkaohmd/logo.png" />
        </div><div id="menuBar" align="right">
            <img src="http://s26.postimg.org/5tjvy2dyx/lnks.png"/>
        </div>
</div>

I have removed your 'form' tag because we only need that if your user is going to use a form (obviously), like a login form - even then the form tag doesn't go around the whole page.

And here's a JSFiddle: http://jsfiddle.net/gSAW4/1/
Please let me know if there's anything you want me to explain or help you with further

Maybe I'm just confused right now, but from I can see in your answer, there is no differencee (except the asp attributes) in your code, compared to mine? I am pretty sure that all asp forms have to be enclosed in a form tag, to be executed severside. — Matt Baech, Mar 11 '14 at 08:57

score 0 · Accepted Answer · answered Apr 09 '14 at 09:48

0

The answer was to set the line-height property of those divs to 0 in my css file. I have no clue what the line-height was set to originally, but it worked.

answered Apr 09 '14 at 09:48

Matt Baech

404
11
23

score 0 · Answer 3 · answered Apr 09 '14 at 09:53

0

You already answered yourself, but I'd like to know if the 'gap' you experienced is always below the images? are not block elements and I used to have a 1px margin on the bottom, even when margin is resetted. I usually have to do a display: block on images to have that 1px gap removed.

answered Apr 09 '14 at 09:53

Danny Jasper

20
5

I tried that too, but setting the dislpay to block, inline, block-inline and so on didn't cut it for me, but yes, I had a horizontal header with a horizontal nav-bar beneath it. The 1px gap showed up between the two. I am not sure if that answered your question. – Matt Baech Apr 09 '14 at 10:31

Horizontal space between divs

3 Answers3