Placing Image and Menu next to each other.

[lunavoco]

I'm new to CSS and fighting my way through it.

I have an image in a div and a flyout menu in a div. I'd like to have them next to each other, image on left and menu on right.

I placed them both in a larger div and tried to center that. It's not working.

I spent most of yesterday at work googleing with limited results. I tried overflow hidden, but that didn't work.

Suggestions?

HTML:

<div id="inthemiddle">


<div id="splash">
<img src="menusplash.gif" alt="More to come.">
</div>


<div id="menu">
<ul>
<li><a href="#">MDK</a>
<ul>
<li><a href="MDK\MDK Rules 1.0.pdf">Current Rules</a>
</li>
</ul>
</li>
<li><a href="#">RPGs</a>
<ul>
<li><a href="#">Legend of the Five Rings</a>
<ul>
<li><a href="RPGs\4E Character Sheet - Color.pdf">4E Color Character Sheet</a></li> 
<li><a href="RPGs\Probability Chart+.pdf">Probability Chart+</a></li>
</ul>
</li>
<li><a href="#">Mage: The Awakening</a>
</li>
<li><a href="#">Shadowrun</a>
</li>
</ul>
</li>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
</div>


</div>

CSS

#inthemiddle {
overflow: hidden;}



/* MENU*/
/* Define the body style */
body {
 font-family:Arial;
 font-size:12px;}
 

/* We remove the margin, padding, and list style of UL and LI 

components */
#menu ul, #menu ul li{
 margin:0;
 padding:0;
 Position:relative;
 list-style:none;}
 

/* We apply background color and border bottom white and width to 

150px */
#menu ul li{
 background-color:#333333;
 border-bottom:solid 1px 333333;
 width:150px;
 cursor:pointer;}
 

/* We apply the background hover color when user hover the mouse 

over of the li component */
#menu ul li:hover{
 background-color:#660000;
 position:relative;}
 
/* We apply the link style */
#menu ul li a{
 padding:5px 15px;
 color:#ffffff;
 display:inline-block;
 text-decoration:none;}
 

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the 

ul until the user hover the parent li item */
#menu ul li ul{
 position:absolute;
 display:none;}
 

/* When user has hovered the li item, we show the ul list by 

applying display:block, note: 150px is the individual menu width. */
#menu ul li:hover ul{
 left:150px;
 top:0px;
 display:block;}
 

/* we apply different background color to 2nd level menu items*/
#menu ul li ul li{
 background-color:#660000;}
 

/* We change the background color for the level 2 submenu when 

hovering the menu */
#menu ul li:hover ul li:hover{
 background-color:#CD0000;}

 
/* We style the color of level 2 links */
#menu ul li ul li a{
 color:#ffffff;
 display:inline-block;
 width:120px;}

 
/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu 

*/
#menu ul li:hover ul li ul{
 position:absolute;
 display:none;}

 
/* We show the third level menu only when they hover the second 

level menu parent */
#menu ul li:hover ul li:hover ul{
 display:block;
 left:150px;
 top:0;}
 

/* We change the background color for the level 3 submenu*/
#menu ul li:hover ul li:hover ul li{
 background:#CD0000;}
 

/* We change the background color for the level 3 submenu when 

hovering the menu */
 #menu ul li:hover ul li:hover ul li:hover{
 background:#FF7619;}

 
/* We change the level 3 link color */
#menu ul li:hover ul li:hover ul li a{
 color:#ffffff;}
 

/* Clear float */
.clear{
 clear:both;}

[edited by: DrDoc at 7:11 pm (utc) on Aug 9, 2013]
[edit reason] Removed broken link [/edit]

[DrDoc]

Welcome to WebmasterWorld!

So, you want both centered on the page?

+-------------------+ 
|  +------+------+  | 
|  | IMG  | MENU |  | 
|  +------+------+  | 
+-------------------+

[lucy24]

I'm looking for one of two terms:

display: inline-block
and/or
float: {left or right}

The posted CSS has a comment line "clear floats", but no sign of the floats themselves. A "float" property would have to be attached to either "splash" or "menu", whichever comes first in the HTML (only one, not both)

The form "display: inline-block" shows up several times-- but only attached to <a> elements. An "inline-block" property would need to be attached to both "splash" and "menu".

Option C is "display: table-cell" but you don't see this nearly as often.

[birdbrain]

Hi there lunavoco,

and a warm welcome to these forums. ;)

Here is you amended code, for you to try...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>image and menu horizontally centered</title>

<style>

/* Define the body style */

body {
   background-color:#f0f0f0;
   font-family:arial,sans-serif;
   font-size:12px;
  }
#inthemiddle {
   width:300px;
   margin:auto;
   background-color:#333;
   border:1px solid #999;
   box-shadow:10px 10px 10px #666;
  }
#inthemiddle:after {
   content:'';
   display:block;
   clear:both;
  }
#splash {
   float:left;
   width:150px;
  }
/* MENU*/

/* We remove the margin, padding, 
  and list style of UL components */

#menu, #menu ul {
   margin:0;
   padding:0;
   list-style:none;
   white-space:nowrap;
 }
#menu {
   float:left;
 }
#menu ul {
   box-shadow:10px 10px 10px #666;
 }

/* We apply background color and border 
  bottom white and width to 150px */

#menu li {
   position:relative;
   background-color:#333;
   border-bottom:1px solid #333;
   width:150px;
   cursor:pointer;
 }
#menu li ul li {
   width:auto;
 }


/* We apply the background hover color when user 
  hover the mouse over of the li component */

#menu li:hover {
   position:relative;
   background-color:#600;
  }

/* We apply the link style */

#menu li a {
   display:block;
   padding:5px 15px;
   color:#fff;
   text-decoration:none;
 }

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and 
  hidden the ul until the user hover the parent li item */

#menu li ul {
   position:absolute;
   display:none;
  }


/* When user has hovered the li item, we show the ul list by applying 
  display:block, note: 150px is the individual menu width. */

#menu li:hover ul {
   left:150px;
   top:0;
   display:block;
  }


/* we apply different background color to 2nd level menu items*/

#menu li ul li {
   background-color:#600;}


/* We change the background color for the level 2 
  submenu when hovering the menu */

#menu li ul li:hover {
   background-color:#cd0000;
  }

/* We style the color of level 2 links */

#menu li ul li a {
   display:block;
   color:#fff;
  }

/**** THIRD LEVEL MENU ****/

/* We need to hide the 3rd menu, when 
  hovering the first level menu*/

#menu li:hover ul li ul {
   position:absolute;
   display:none;
  }


/* We show the third level menu only when 
  they hover the second level menu parent */

#menu li ul li:hover ul {
   display:block;
   left:100%;
   top:0;
  }


/* We change the background color for the level 3 submenu*/

#menu li:hover ul li:hover ul li {
   background:#cd0000;
  }


/* We change the background color for the level 3 
  submenu when hovering the menu */

#menu li ul li ul li:hover a {
   background:#ff7619;
  }

/* We change the level 3 link color */

#menu li ul li:hover ul li a {
   color:#fff;
  }
</style>

</head>
<body>

<div id="inthemiddle">

<img id="splash" src="menusplash.gif" alt="More to come.">

<ul id="menu">
  <li><a href="#">MDK</a>
   <ul>
   <li><a href="MDK\MDK-Rules-1.0.pdf">Current Rules</a></li>
   </ul></li>
  <li><a href="#">RPGs</a>
   <ul>
   <li><a href="#">Legend of the Five Rings</a>
    <ul>
    <li><a href="RPGs\4E-Character-Sheet-Color.pdf">4E Color Character Sheet</a></li>
    <li><a href="RPGs\Probability-Chart.pdf">Probability Chart+</a></li>
    </ul></li>
   <li><a href="#">Mage: The Awakening</a></li>
   <li><a href="#">Shadowrun</a></li>
   </ul></li>
  <li><a href="#">Photos</a></li>
  <li><a href="#">Videos</a></li>
  <li><a href="#">unknown</a></li>
  <li><a href="#">unknown</a></li>
</ul>

</div><!-- end #inthemiddle --> 

</body>
</html>

birdbrain