html - Two divs side by side, one centered and the other one float right -


With embarrassment, I'm having trouble concentrating on a div (any length) and a div right. So I have a container with the menu button which is centered and users have a link to the control panel on the right. This should look like this 

  ---------- ------------------------ -------------------------- ---------------- | | ---- Menu Items ---- | | --ControlPanel-- | -------------------------------------------------- --------------------------

I know this question has probably been asked for some time But I have searched through them and they rely on all percentages or fixed widths.

I have a container 

  .container {height: 50px; Width: 100%; Padding: 10px 10px; } .Manblock {width: 200px; Margin: 0 auto; Padding: 0; } .controllinks {float: right; }

The HTML is like this 

  & lt; Div class = "container" & gt; & Lt; Div class = "menblock" & gt; & Lt; Span class = "menuitem" & gt; Stream & lt; / Span & gt; & Lt; Span class = "menuitem" & gt; Profile & lt; / Span & gt; & Lt; Span class = "menuitem" & gt; Friends & lt; / Span & gt; & Lt; / Div & gt; & Lt; Div class = "controllinks" & gt; One user can access the control panel link & lt; / Div & gt; & Lt; / Div & gt; By controlling the menubock and controlling  display: inline block  (or inline), I can get them right on the same line.  .menublock  to focus in this display and  margins: 0 auto;  does not work I was roaming with  .menublock   display: table , but he did not want to stay on the same line.

It was probably very easy, so you did not even try it, but it was fixed in my test file Made: Just & lt; Div class = "controllinks" & gt; and & lt; Div class = "menublock" & gt; : 

  & lt; Div class = "container" & gt; & Lt; Div class = "controllinks" & gt; One user can access the control panel link & lt; / Div & gt; & Lt; Div class = "menblock" & gt; & Lt; Span class = "menuitem" & gt; Stream & lt; / Span & gt; & Lt; Span class = "menuitem" & gt; Profile & lt; / Span & gt; & Lt; Span class = "menuitem" & gt; Friends & lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt;

Comments

Post a Comment