CODEWITHSUNDEEP
htmlcss
dancemc15
dancemc15

Reputation: 628

How do I position my layout to have my aside next to my section?

Below my nav bar, I would like an aside on the left and a section right next to the aside. My aside and section should be on the same line not overlapping. My section right now is below my aside on a new line. How can I fix this issue?

header {
	color:black;
	text-align:center;
	padding:5px;
	display:block;
}

#wrapper {
	width: 700px;
	margin: 0 auto;

}

#nav {
	width:500px;
	margin: 0 auto;
	list-style-type: none;
	white-space: nowrap;
	display:block;
}

#nav {
  padding: 10px 0;
  width:500px;
  margin: 0 auto;
  text-align: center;
  list-style-type: none;
  display:block;
  -webkit-box-shadow: 0 2px 10px -12px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
}

#nav li {
  display: inline-block;
}

#nav a {
	text-align:center;
	text-decoration:none;
	padding: 5px;
}

aside {
	padding:5px;
	height:200px;
	width:100px;
	display:block;
}

section {
	float:left;
	width:200px;
	padding:5px;
	display:inline-block;
}
<header>Portfolio</header>


<ul id="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Writing</a></li>
  <li><a href="#">Multimedia</a></li>
  <li><a href="#">Resume</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<aside>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdf
sdfsdfsdfsdfsdfsdfsdfsdfs
sdfsdfsdfsdfsdfsdfsdfsdf
sdf
</aside>

<section>
sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd
</section>

Upvotes: 2

Views: 9163

Answers (4)

abalter
abalter

Reputation: 10383

You need word-wrap. Then you could:

  1. Use display: block and float:left. https://jsfiddle.net/abalter/5cyp6tjh/

  2. Use display: inline-block and vertical-align: top. https://jsfiddle.net/abalter/cdsjsvL3/

EDIT If you want to center them, the best way would be to use a wrapper rather than fudging with widths. That will get you into trouble if you try to go responsive (mobile).

https://jsfiddle.net/abalter/2a86ac1t/

HTML and CSS:

aside, section {
  display: inline-block;
  vertical-align: top;
  border: 1px dotted blue;
  word-wrap: break-word;
}
    
#wrapper {
  text-align: center;
}
<div id="wrapper">
  <aside>
    sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfs
    sdfsdfsdfsdfsdfsdfsdf
    sdfsdfsdfsdfsdfsdfsdfsdfs
    sdfsdfsdfsdfsdfsdfsdfsdf
    sdf
  </aside>
    
  <section>
    sdfsdfsdfsdfsdfsdfsdsdfsdfsdfsdfsdfsdfsd
  </section>
</div>

Upvotes: 2

Mukesh Ram
Mukesh Ram

Reputation: 6328

Add float:right; in css for <aside> tag.

OR

You can move <aside> below to section and add float:left; in css.

aside {
 padding:5px;
 height:200px;
 width:100px;
 float:right;
}

And

Use word-break: break-all; for aside and section to prevent overlapping.

Upvotes: 2

user1937699
user1937699

Reputation:

You have to remove the display:block from aside and change the width to 300px since the float element is are 200px so then it must have 300px so then it format correctly and it overcome the overlap problem

or

you can change the width to auto : width:auto aside { padding:5px; margin-right:30px; height:200px; width:300px; float:left; }

Upvotes: 1

Aditya Ponkshe
Aditya Ponkshe

Reputation: 3900

Problem is here that you have applied display:block to aside. To fix it use float:left or display:inline-block instead of display:block. like this 

aside {
    padding:5px;
    height:200px;
    word-break: break-word;
    float:left;
}

To remove overlap. use word-break: break-word;

Upvotes: 1

Related Questions