Note that there are some explanatory texts on larger screens.

plurals
  1. POColumns in CSS3 and HTML5
    primarykey
    data
    text
    <p>I'm trying to break the line between my pairs of columns and really having some trouble. I want the 1st column centered on the page, the second smaller column to the right of it.</p> <p>This would be repeated below this pair of columns.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Choose to Give&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="web.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;ul class="nav"&gt; &lt;li&gt;&lt;a href="/home/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/about_us/"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/foundations/"&gt;Foundations&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/forums/"&gt;Forums&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="/contact/"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="column1of2"&gt; &lt;h2&gt; Do something that matters. blah blah &lt;/h2&gt; &lt;/div&gt; &lt;div class="column2of2"&gt; &lt;h2&gt; Top user contributions. &lt;/h2&gt; &lt;/div&gt; &lt;br&gt; &lt;div class="column1of2"&gt; &lt;h2&gt; Random title here blah blah &lt;/h2&gt; &lt;/div&gt; &lt;div class="column2of2"&gt; &lt;h2&gt; Top company contributions. &lt;/h2&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>And then the CSS.</p> <pre><code>body { background-color:#66FF33; font-size: 8pt; color: black; text-align: left; } .nav{ border:10px solid black; background-color: white; border-width:10px 0; list-style:none; padding:0; margin-top: 10%; text-align:center; font-size: 12pt; } .nav li{ display:inline; } .nav a{ display:inline-block; padding:10px; } h1 { text-align: left; color: black; background-color: white; padding: 30px; border-style: solid; border-width: 10px; border-left-width: 10px; border-right-width: 10px; border-color: black; border-radius: 5px; } h2 { text-align: left; color: black; background-color: white; padding: 30px; border-style: solid; border-width: 10px; border-left-width: 10px; border-right-width: 10px; border-color: black; border-radius: 5px; } .column1of2 { float: left; width: 30%; left-margin: 10%; } .column2of2 { float: right; width: 15%; right-margin: 2%; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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