March 28, 201412 yr So I have started making my first site with Div tags and looked everywhere for a decent answer and cant find one anywhere, I have tried positioning the div Absolute and relative but the div wont move. It's driving me crazy. My code: CSS: #navbar { margin:0px auto; width:1020px; height:36px; background:url(images/navbar.jpg) no-repeat; } HTML: <body> <div id="banner"></div> <div id="navbar"> <div id="home"><img src="images/home.jpg" width="100" height="31" /></div><div id="about"><img src="images/about.jpg" width="100" height="31" /></div></div> <div id="content"></div> <div id="bottom"></div> Outcome: attached. If anyone can help then I would really appreciate it, remember I am a beginner and looking for constructive feedback if possible
March 29, 201412 yr hi, it seems that the home div and about is not in "float:left" or "display:inline-block"
March 29, 201412 yr Author hi, it seems that the home div and about is not in "float:left" or "display:inline-block" So would I put display:inline-block at the start of each div in the CSS? Thanks
March 29, 201412 yr Block elements (like divs) own 100% of the width (unless they are set to float), even if you specify a width there is always a "line break" after a block element. The next element wil therefore be placed in the availeble space below. the solution is, as suggested by d3vinefist, either to float them or change their display property (to inline-block, inline or table-cell)
March 29, 201412 yr Author Excellent, I will try this out tonight. Appreciate the help! Update, worked a dream! Edited March 29, 201412 yr by JordanWoods11
Create an account or sign in to comment