Databases
StackOverflow2013
Postsdbo
PONeed these two <div>s side by side
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONeed these two <div>s side by side
    text
    copied!<p>So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.</p> <p>For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:</p> <p>HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Landing Mockup&lt;/title&gt; &lt;link href="mockup.css" rel="stylesheet" type="text/css" media="screen" /&gt; &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'&gt; &lt;link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="landing-container"&gt; Hello. I'm Charles Baker.&lt;br /&gt; &lt;span id="landing-codeblock"&gt;{ I design websites. }&lt;/span&gt; &lt;div id="landing-links"&gt; &lt;div id="landing-links-left"&gt; Small links here. &lt;/div&gt; &lt;div id="landing-links-right"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;test1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;test1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;test1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;test1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;test1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>CSS:</p> <pre><code>body { margin-top: 200px; font-family: 'Roboto Slab', serif; } #landing-container { width: 1000px; margin: 0 auto; font-weight: bold; font-size: xx-large; text-align: center; } #landing-codeblock { font-family: 'Droid Sans Mono', monospace; font-size: large; } #landing-links { width: 700px; margin: 0 auto; border: 1px solid blue; } #landing-links-left { border: 1px solid orange; float: left; text-align: left; font-size: x-small; width: 200px; } #landing-links-right { font-size: small; text-align: right; width: 400px; float: right; } #landing-links ul { border: 1px solid green; list-style-type: none; } #landing-links ul li { border: 1px solid red; display: inline; } #landing-links li a { display: inline-block; padding: 5px; } #clear { clear: both; } </code></pre> <p>I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload