Display up to two sections next to each other
I am trying to anchor two divs side by side using inline-block
.
However, for some reason it won't just work. That being said, I have two questions:
-
How can I display inline block next to container
<nav>
and<article>
. The navigator will move to the left and the article will be positioned to the right. Again, how can I usedisplay: inline-block
with this. I don't need itfloat
. -
How to change the list style ul Li ul Li and fix their position, which are indented like this: http://prntscr.com/7koc47
Here's my CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* General CSS */
body{
background-color: #eeeeee;
font-family: "Times New Roman", Georgia, Serif;
font-size: 17px;
}
#wrapper{
width: 970px;
margin: 0 auto;
}
header{
background-color: #dddddd;
padding: 15px;
margin: 15px 0;
}
header h1{
font-size: 40px;
font-weight: bold;
}
nav{
background-color: #dddddd;
}
nav{
display: inline-block;
}
nav ul li{
list-style: disc;
}
nav ul > li{
list-style: circle;
}
nav ul li a{
text-decoration: none;
}
article{
display: inline-block;
background-color: #aaaaaa;
margin: 20px 0;
}
article h2{
font-size: 30px;
font-weight: bold;
margin: 20px 0;
}
article ul li{
list-style: disc;
margin: 15px 0;
}
article ul li a{
font-weight: bold;
}
footer{
background-color: #dddddd;
margin: 15px 0;
}
.border{
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
padding: 25px;
}
<div id="wrapper">
<header class="border">
<h1>@ Loup's</h1>
</header>
<nav id="links" class="border">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">articles/</a>
<ul>
<li><a href="#">beliefs respect and facts</a></li>
<li><a href="#">classes suck</a></li>
<li><a href="#">taboo oo</a></li>
<li><a href="#">classes as syntatic sugar</a></li>
<li><a href="#">syntatic sugar</a></li>
<li><a href="#">better keyboards</a></li>
<li><a href="#">ideal computer</a></li>
<li><a href="#">assignment</a></li>
<li><a href="#">language</a></li>
<li><a href="#">dcvs</a></li>
<li><a href="#">is fp feasible</a></li>
<li><a href="#">does oo sucks</a></li>
</ul>
</li>
<li><a href="#">projects</a></li>
<li><a href="#">tutorials</a></li>
<li><a href="#">contact me</a></li>
</ul>
</nav>
<article class="border">
<h2>My essays</h2>
<p>My last posts depend on each other, and should be read in sequence. Articles not in bold are optionnal.</p>
<ul>
<li><a href="#">Assignment Statement Considered Harmfull</a>. Pervasive mutable state mate programs more difficult to deal with. While this is old news, most programmers don't know or don't care. It a pitty, because <a href="#">simple remedies</a> exist.</li>
<li><a href="#">Defining Syntatic Sugar</a>. I sometimes hear arguments about what is or is not syntactic sugar. This is an attempt at defining it. </li>
<li><a href="#">Class-based Programming as Syntactic Sugar</a>. Most of the time, "Object Oriented" actually mean classes. Classes are nothing more than syntactic sugar, at least in statically typed languages such as Java and C++. Sugar is not useless, but seeing past it helps us understand classes better.</li>
<li><a href="#">Taboo "OO"</a>. The term "OO" is so overloaded that we should stop using it. Better substitutes are "classes" and "prototypes".</li>
<li><a href="#">How Class based Programming Sucks</a>. Classes are vastly sub-optimal. Functional programming is far better.</li>
</ul>
</article>
<footer class="border">
<p>Contact, suggestions: Send me an email at <a href="#">l@loup-valliant.fr</a></p>
<p>Built with <a href="#">USSM</a></p>
</footer>
Check out my JSFIDDLE here: https://jsfiddle.net/yshckr8a/
Here's your CSS:
nav{
display: inline-block;
}
nav ul:first-child > li:first-child {
list-style: none;
}
nav ul:first-child > li:first-child > a{
position: relative;
left: -20px;
}
nav > ul > li > ul > li {
list-style: disc !important;
}
nav ul ul > li{
list-style: circle !important;
padding-left: 10px;
}
nav ul li a{
text-decoration: none;
}
source to share
To display your article next to your navbar, you just need to set the width for your article:
article {
width: 70%;
}
To move sub ul li just add a field to it:
#links > ul > li > ul > li > ul > li {
margin-left: 20px;
}
For your list style:
#links > ul > li > ul > li {
list-style-type: initial;
}
#links > ul > li > ul > li > ul > li {
list-style: outside none circle;
}
#links > ul > li {
list-style-type: none;
}
UPDATED JSfiddle: https://jsfiddle.net/ghorg12110/yshckr8a/3/
source to share
1.
The reason the two div's
don't align side by side is because they don't have enough space, for proof you can add width
to the article and make both of them div's
vertically aligned up.
I suggest that you use percentages, if possible, for article
andnav
nav {
vertical-align: top;
width: 20%;
}
article {
vertical-align: top;
width: 69%;
}
2.
For the second problem, just add margin-left
to the classul
ul {
margin-left: 10px
}
source to share