html - Cannot get two sections next to each other without screwing up other things -


What do I have:

I have a top section and a body section (class = " Header "class =" body "respectively) and inside the header section, I have the logo section and menu section. I am trying to put the logo and menu on the same line.

What I tried:

The result of disappearing in the background for the floating headings section on the left and the second right, changed the width of the logo to 20% and 80% from the menu and Floating them left and right Trying the same results as above: Inline which results is a big mess.

Is it possible to get two sections next to each other without disturbing something else?

Anyone else can tell what is wrong why is Ans?

JSfiddle:

Relevant HTML

  & lt; Body & gt; & Lt; Section square = "header" & gt; & Lt; Section square = "logo" & gt; & Lt; A href = "#" & gt; & Lt; Img src = "logo.png" height = "50px" /> & lt; / A & gt; & Lt; / Section & gt; & Lt; Section class = "menu" & gt; & Lt; Ul id = "menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About ↓ & lt; / A & gt; & Lt; Ul class = "hidden" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Who we are & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; What we do & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Section & gt; & Lt; / Section & gt; & Lt; Hour & gt; & Lt; Section class = "body" & gt; & Lt; H1 & gt; Hello World & lt; / H1> & Lt; P & gt; Hello World & lt; / P & gt; & Lt; / Section & gt; & Lt; / Body & gt;  

relevant css

  body {margin: auto; Background color: # 46a7bb; } .Header {width: 100%; } Hour {border color: black; Border-bottom-width: 5px; Margin: 0 0 0 0; } H1 {margin: 0 0; } .body {width: 75%; Margins: Auto; Background: white; Text align: center; } .logo {margins: 0; Background: # 313145; }  

Thanks!

Add the following rule:

  .header, .logo,. Menu {float: left; }  


Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -