MongooseLover MongooseLover - 5 months ago 8
CSS Question

Cannot get two CSS elements to be next to each other

I'm not the best at CSS and cannot figure out what's wrong. Think it might be the
tags I'm using in my sidebar. I would like the nav element with the "vert" id and the div element with the "text-container" id to be NEXT to each other, but the way it is going, it's sending my stuff in the "text-container" into the footer, which is unacceptable.

I'm baffled as to how to get them next to each other. I know elements can be next to each other as it worked in my nav element with the "hor" id with all the a elements next to each other with no problem.

I think it might be the
tags, but don't know what I can do about it. I could just axe the navbar as I already have that in the header, but I just spent a lot of time on the navbar to now have to kill it and wish I could keep it.

<html>
<head>
<title> The Resorts </title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>

<style>

h1
{
font-family: "MV Boli", Times, Serif;

font-style: bold;
text-align: center;
font-size: 40px;

}

h2
{

font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}

#text-container
{
width: 1045px;
height: 690px; */
zoom: 1;
margin: 0;
display: inline-block


}

#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;

}

#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}



</style>

<div id="content">
<div id="logo">
<img src="./logo.png"></img>
</div>
<div id="container">
<nav id="hor">
<div><a href="home.html"> Home </a> </div>
<div><a href="mountains.html"> The Mountains </a></div>
<div><a href="resorts.html"> The Resorts </a></div>
<div><a href="snowReports.html"> Snow Reports </a></div>
<div><a href="eventsAndActivities.html"> Events &amp Activities </a></div>
<div><a href="planTrip.html"> Plan A Trip </a></div>
</nav>
<div id="middle">
<nav id="vert">
<a href="home.html"> Home </a> <br/>
<a href="mountains.html"> The Mountains </a><br/>
<a href="resorts.html"> The Resorts </a><br/>
<a href="snowReports.html"> Snow Reports </a><br/>
<a href="eventsAndActivities.html"> Events &amp Activities </a><br/>
<a href="planTrip.html"> Plan A Trip </a>
</nav>

<div id="text-container">
<h1> The Resorts </h1>
<h2> The West Resort </h2>
<p>
The West Resort has everything from wide-open beginner areas to challenging terrain parks to gladed tree skiing hideaways. It has a young, energetic feel, but there's more to it than just jumps and jibs. West is

home to the Children's Sports Center, the Bullwheel Bar and Grill and the Foggy Goggle where fashion shows, movie premieres and live performances are held on a regular basis.
</p>

<h2> The East Resort </h2>
<p>
The East Resort boasts the longest trails in the region serviced by a single high-speed quad. Its long, groomed, cruising trails make it perfect for carving, but it is also home to the Olympic Bowl, the longest,

steepest bump run in the region. After a quick ascent on the Diamond Peaks Express, you'll find an additional 20 acres of beginner terrain up top. With 1,600 vertical feet of uninterrupted corduroy, the East

Resort offers traditional skiers and snowboarders a true alpine experience without having to journey far from home.

</p>

<h2> The North Resort </h2>
<p>
The North Resort is the perfect family-friendly ski resort with 70 acres of gently rolling terrain and historic, log cabins that are terrific for exploring. It is big enough to offer a true winter experience but small

enough to maintain its historical warmth and charm. Spend the afternoon shushing down the slopes or warm up by the fireplace with a cup of hot chocolate at the North Lodge. It is one of the region’s oldest

base lodges with ties that go back to the Big Pines ski clubs of the 1940s.

</p>
</div>
</div>
</div>

<div id="footercontainer">
<footer>
&copy; 2016

</footer>
</div>
</div>

</body>
</html>



==main.css==

#logo
{

border: 1px dashed purple;
width: 1050;
height: 75;

}

#logo > img
{
width: 1050;
height: 75;

}


#content
{

border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 500;



}


nav
{


border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;

}

nav#vert
{
width: 220;;
height: 540;
margin: 0;

}

body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./image8.jpg);
background-repeat:no-repeat;

background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}

#footerContainer
{

border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;

}

footer
{


border: 10px solid transparent;
padding: 15px;


text-align: left;
margin: 0 auto;
width: 1000px;

background-repeat: repeat-y;

border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;

}

#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1045px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 690px;

}


nav > a
{

color: #ccccff;

}

nav#hor > div
{

border: 1px solid white;
float: left;
padding: 10px;
}

nav#hor
{
width: 1000px;
height: 50px;
margin: 0;

}



nav#hor > div > a
{

color: #ccccff;
}



nav#hor>div:hover
{

background-color: #01ff02;

}

Answer

Here you go...

https://jsfiddle.net/og9wpLmw/

  • I coloured the two blocks green and red to make them obvious
  • I fixed & amp; by putting ; on the ends
  • I fixed by making it
  • I made boxes next to each other using display:table-cell;
  • I put all the CSS into the css file
  • I fixed the widths in nav#vert by including px in the measurement.

Here is the css that makes the difference:

#text-container {
  width: 1045px;
  height: 690px;
  */ zoom: 1;
  margin: 0;
  display: table-cell;
  background-color:red;
}
nav#vert {
  background-color:green;
  width: 220px;
  height: 540px;
  margin: 0px;
  display:table-cell;
  }