Issue with two div elements staying side-by-side
Question
I've found some places where people asked questions like this, but none of the answers in those places have helped me. Hoping I'll have more luck asking my own question.
I'm trying to design a base/prototype website for the company I work for. On our Services page, I wanted s sidebar navigation menu for our different services on the left, while the content is on the right. It was working great until I began adding content to the page and the paragraph wrapped to a second line. Once that happened, the content div dropped below the sidebar navigation. I've tried displaying them as inline-blocks like someone in another question suggested, but that didn't work. I'm trying to practice with responsive content also, so I don't want to give a bunch of absolute widths or anything to make them stay beside each other. Can anybody help me figure this out?
See working example: https://jsfiddle.net/joshuahuff/qcckdqju/1/ * The content background was set to yellow just so it's visible while figuring out this issue. The background will be removed once the problem is solved.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tab Title</title>
<meta name="description" content="Description of Site">
<meta name="author" content="Name of Author">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="js/scripts.js"></script>
<header>
<h1><a href="index.html">Atlas Land Office</a></h1>
<nav class="MainNavbar">
<div class="MainNavbarDropdown">
<ul>
<li><a href="index.html">Home</a></li>
<li class="selected"><a href="services.html">Services</a></li>
<li><a href="projects.html">Highlight Projects</a></li>
<li><a href="news.html">News</a></li>
<li id="contact-us" class="contact-us contact-us-selected"><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
</header>
<div class="PageContent">
<div class="PageContentNav">
<ul>
<li><a href="alta.html">ALTA/ACSM Land Title Survey</a></li>
<li><a href="as-built.html">As-Built Survey</a></li>
<li><a href="boundary.html">Boundary Survey</a></li>
<li><a href="construction.html">Construction Staking</a></li>
<li><a href="elevation.html">Elevation Certificate</a></li>
<li><a href="access.html">Legal Access Certificate</a></li>
<li><a href="split.html">Lot Split Survey</a></li>
<li><a href="mir.html">Mortgage Inspection Report</a></li>
<li><a href="topo.html">Topographic Survey</a></li>
</ul>
</div>
<div class="Content">
<h2>Overview</h2>
<p class="PageContentP"><i>Atlas Land Office</i> is a full-service land surveying company which strives to provide nothing but top-notch service to our clients, both in-field <em>and</em> in-office. We do everything from ALTA/ACSM Land Title Surveys to Mortgage Inspection
Reports.</p>
<br />
<p><b>Our services include:</b>
<ul>
<li>ALTA/ACSM Land Title Survey</li>
<li>As-Built Survey</li>
<li>Boundary Survey</li>
<li>Construction Staking</li>
<li>Elevation Certificate</li>
<li>Legal Access Certificate</li>
<li>Lot Split Survey</li>
<li>Mortgage Inspection Report</li>
<li>Topographic Survey</li>
</ul>
</p>
</div>
</div>
</body>
</html>
/* General */
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Oswald:700|PT+Sans');
body {
padding: 0;
margin: 0;
font-size: 62.5%;
}
/* Smartphones */
@media screen and (max-width:320px) {
/* put your css here */
}
/* Tablets */
@media screen and (min-width:321px) {
/* put your css here */
}
/* Desktops */
@media screen and (min-width:800px) {
/* Main Navigation */
/* Styling the header */
header {
height: 60px;
width: 100%;
padding: 0;
margin: 0;
background: /*#ecf0f1*/
#222;
color: #E54D0B;
}
/* Styling the header h1 */
header h1 {
padding-left: 10%;
line-height: 60px;
font-size: 3em;
}
header h1 a {
text-decoration: none;
color: #E54D0B;
}
/* Applying same CSS to header h1 */
header h1 {
margin: 0;
font-family: Oswald, "Arial Black", Gadget, sans-serif;
}
/* Styling the nav container */
.MainNavbar {
height: 30px;
margin: 0;
line-height: 30px;
font-size: 1.4em;
box-shadow: 5px 0 3px #333;
}
.MainNavbar .MainNavbarDropdown {
background: #E54D0B;
}
.MainNavbar ul {
padding-left: 10%;
margin: 0;
list-style: none;
font-family: "PT Sans", sans-serif;
}
.MainNavbar ul li {
display: inline-block;
position: relative;
line-height: 30px;
text-align: center;
}
.MainNavbar ul li a {
padding: 0 30px;
display: block;
text-decoration: none;
color: #000;
}
.PageContentNav ul li a {
padding: 0 15px;
display: block;
text-decoration: none;
color: #000;
}
.MainNavbar ul li:hover a {
height: 30px;
background: #F56527;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
transition: all 0.1s linear;
}
.selected {
height: 30px;
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #333;
}
.contact-us {
background: #222;
}
#contact-us a {
color: #FF7133;
}
.MainNavbar ul li.contact-us:hover a {
height: 30px;
background: #222;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 2px solid #FF7133;
transition: all 0.1s linear;
}
/* Website Content */
.PageContent {
padding: 3% 15% 20px;
margin: 0;
color: #000;
font-family: Arial, sans-serif;
font-size: 1.4em;
}
.PageContentNav {
padding-top: 2%;
margin: 0;
float: left;
font-family: "PT Sans", sans-serif;
}
.PageContentNav ul {
padding: 0;
margin: 0;
list-style: none;
background: #E54D0B;
}
.PageContentNav ul li {
height: 50px;
padding: 0;
margin: 0;
line-height: 50px;
}
.PageContentNav ul li:hover a {
background: #FF7133;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: all 0.3s linear;
}
.Content {
margin-left: 4%;
float: left;
background: yellow;
}
.Content h2 {
font-family: "Arial Black", Gadget, sans-serif;
}
.Content p {
font-family: "PT Sans", sans-serif;
}
}
1 answers
solution1
0 2017-12-13 19:57:47
You must have the elements adjacent, in a parent, or child of, the other element for CSS to properly find it and execute it the way you want (Such in the case, a drop-down menu). Otherwise you will need jQuery or javascript to "find" the other element that needs to appear/disappear and have that language change the CSS of the element. CSS cannot "detect" another "remote" element this way.
Most of the time you need to have something like...
<ul> //Links
<li>First Main Link
<ul> //This is the menu that appears and disappears
<li>Link to appear #1</li>
<li>Link to appear #2</li>
</ul>
</li>
<li>Second Main Link</li>
</ul>
Then have something similar to for CSS...
//CSS
ul{
width: 900px;
height: 20px;
background: rgba(0,0,0,0.2);
}
ul li{
padding: 10px;
}
ul li > ul{
display: none;
}
ul li:hover > ul{
display: block;
position: absolute; //makes the element appear wherever you want it, starting from where it is located in the parent element
z-index: 10; //this makes the menu hover over other things, similar to layers; higher the number, higher it is
}
This isn't perfect, but might help get the point across. When you hover over ul li, then ul li > ul changes from display: none; to display: block; and "appears" upon hover if the element ul is inside the element li.
Most of the time I personally use div's for the sub-menu that will drop down when you hover over the link, not ul elements, but the choice is yours. Execution is relatively the same. You'll need to add margins or something similar to ul li > ul to "move" the element where you need it to be on the page according to the menu and such.
Good luck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.