Jump to content

[SOLVED] Getting a div to wrap around a navigation menu

twilitegxa

By twilitegxa
in CSS Help

 Share

Recommended Posts

twilitegxa Advanced Member

twilitegxa

Posted
Posted

I have a navigation menu that is set up on the left hand side of my screen, and a div container for the main content that is set to 70% width. If I change the width to 100%, the div content displays below the navigation menu, which is not what I want. I want it to display beside the navigation menu, but wrap around it at the bottom. Can anyone tell me how to set up my CSS to make this happen? I have the div container for the content set to float: left and the menu bar's class is set to float: left. What do I need to change? Here is a screen shot so you can see how it looks now:

 

screen5.gif

Link to comment
Share on other sites
twilitegxa Advanced Member

twilitegxa

Posted
  • Author
Posted

The code I have is set up like this (just enough for you to see what the code is):

 

main page:

<?php include("menu.php"); ?>
<title>Sailor Moon RPG - Chapter 1: Introduction - The Magical Girl Genre</title>
<div id="main">
<h1>Chapter 1: Introduction</h1>
<h2>The Magical Girl Genre</h2>
<p>The  magical girl genre has a rather long and important history in Japan.  The magical girls of Japanese animation (or anime) are a rather unique  group of characters. They defy easy classification, and yet contain  elements from many of the best-loved fairy tales and children's stories  throughout the world. Many countries have imported these stories for  their children to enjoy (most notably Italy and Spain) but this  particular genre of anime still remains mostly unknown to much of the  English speaking world. </p>

 

navigation menu:

<html>
<head>
<!-- Source File -->
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />

<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
</script>
<link rel="stylesheet" type="text/css" href="simpletree2.css" />
<!--[if IE]>
<style>
#main
{
padding: 20px 0 20px 0;
}

</style>
<![endif]-->
</head>
<body>
<center><img src="logo.png" alt="Sailor Moon RPG Logo" title="Sailor Moon RPG Logo" /></center>
<div id="head">
<address><a href="seestore.php" title="Item Store">Item Store</a> | <a href="register.php" title="Register">Register</a> | <a href="youraccount.php" title="Your Account">Your Account</a> | <a href="help.php" title="Help">Help</a>
</address></div>
<table align="right">
<tr>
<td><?php
if ($_SESSION['loggedIn'] == 1) {
?>
<p>Welcome, <?php echo $_SESSION['userName'] ?> (<a href="login.php?action=logoff" title="Log Out">Log out</a>)</p>
<?php
} else {
?>
<p>Please <a href="login.php" title="Log In">log in</a></p>
<?php } ?>
</td>
</tr>
</table><br />
<div id="ddsidemenubar" class="markermenu">
<ul>
<li><a href="home.php" title="Home Page">Home</a></li>
<li><a href="#" title="Getting Started" rel="ddsubmenuside1">Getting Started</a></li>
<li><a href="creationform.php" title="Create Character">Create Character</a></li>
<li><a href="#" rel="ddsubmenuside2" title="Members">Members</a></li>
<li><a href="newsandevents.php" title="News And Events">News And Events</a></li>
<li><a href="glossary.php" title="Glossary">Glossary</a></li>
<li><a href="topiclist2.php" title="Battle Board">Battle Board</a></li>
<li><a href="chat/chatframe.php" title="Battle Chat Lounge">Battle Chat Lounge</a></li>
<li><a href="about.php" title="About Us">About Us</a></li>
<li><a href="news.php" title="Newsletters">Newsletters</a></li>
<li><a href="invite.php" title="Invite Friends">Invite Friends</a></li>
<li><a href="topiclist.php" title="Discussion Board Forum">Discussion Board</a></li>
<li><a href="faq.php" title="Frequently Asked Questions">FAQ</a></li>
<li><a href="contact.php" title="Contact Us">Contact Us</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<!--HTML for the Drop Down Menus associated with Side Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->


<!--Side Drop Down Menu 1 HTML-->

<ul id="ddsubmenuside1" class="ddsubmenustyle blackwhite">
<li><a href="#" title="Chapter 1: Introduction" rel="ddsubmenuside3">Chapter 1: Introduction</a>

<ul class="smaller2"><li><a href="genre.php" title="The Magical Girl Genre">The Magical Girl Genre</a></li><li><a href="sailormoon.php" title="Bishojo Senshi Sailormoon"><em>Bishojo Senshi Sailormoon</em></a><li><a href="seriesbackground.php" title="Sailor Moon Series Background">Sailor Moon Series Background</a><ul class="smaller3"><li><a href="summary1.php" title="Season One Summary (Episodes #1 - #40)">Season One Summary</a></li><li><a href="summary2.php" title="Season Two Summary (Episodes #41 - #82)">Season Two Summary</a></li></ul></li><li><a href="roleplaying.php" title="What Is Role-Playing?">What Is Role-Playing?</a></li><li><a href="example.php" title="An Example Of Play">An Example Of Play</a></li><li><a href="size.php" title="Character Size Relationship">Character Size Relationship</a></li></ul></li>
<li><a href="creation.php" title="Chapter 2: Character Creation">Chapter 2: Character Creation</a>
<ul class="smaller4"><li><a href="creationflowchart.php" title="Character Creation Flowchart">Character Creation Flowchart</a></li><li><a href="gmdiscussion.php" title="GM Discussion">Step 1: GM Discussion</a></li><li><a href="outline.php" title="Character Outline">Step 2: Character Outline</a></li><li><a href="stats.php" title="Assign Stats">Step 3: Assign Stats</a></li><li><a href="attributes1.php" title="Character Attributes">Step 4: Character Attributes</a><ul><li><a href="attributes2.php" title="Scout/Knight Sub-Attributes">Scout/Knight Sub-Attributes</a></li><li><a href="attributes3.php" title="Negaverse/Dark Sub-Attributes">Negaverse/Dark Sub-Attributes</a></li><li><a href="attributes4.php" title="Neutral Attributes">Neutral Attributes</a></li></ul></li><li><a href="defects.php" title="Character Defects">Step 5: Character Defects</a></li><li><a href="derived.php" title="Derived Values">Step 6: Derived Values</a><ul class="smaller5"><li><a href="derived.php#combat" title="Combat Value">Combat Value</a></li><li><a href="derived.php#health" title="Health Points">Health Points</a></li><li><a href="derived.php#energy" title="Energy Points">Energy Points</a></li></ul></li><li><a href="background.php" title="Background Points">Step 7: Background Points</a></li></ul></li>
<li><a href="#" title="Chapter 3: Game Mechanics">Chapter 3: Game Mechanics</a>
<ul class="smaller6"><li><a href="introduction.php" title="Introduction">Introduction</a></li>
<li><a title="Combat Flowchart">Combat Flowchart</a></li>
<li><a href="dice.php" title="Dice, Stat Checks, & Combat Rolls">Dice, Stat Checks, & Combat Rolls</a><ul class="smaller7"><li><a href="dice.php#stat" title="Stat Checks">Stat Checks</a></li><li><a href="dice.php#combat" title="Combat Dice Rolls">Combat Dice Rolls</a></li></ul></li>
<li><a href="action.php" title="Taking Action">Taking Action</a></li>
<li><a href="combat.php" title="Combat">Combat</a><ul class="smaller8"><li><a href="combat.php#initiative" title="Initiative">Initiative</a></li><li><a href="combat.php#attack" title="Attack">Attack</a></li><li><a href="combat.php#noncombat" title="Non-Combat Actions">Non-Combat Actions</a></li><li><a href="combat.php#defend" title="Defend">Defend</a></li><li><a href="combat.php#damage" title="Deliver Damage">Deliver Damage</a></li></ul></li>
<li><a href="weapons.php" title="Weapons And Armor">Weapons And Armor</a></li>
<li><a href="recovering.php" title="Recovering Lost Points">Recovering Lost Points</a>
<ul class="smaller9"><li><a href="recovering.php#health" title="Health Points">Health Points</a></li>
<li><a href="recovering.php#energy" title="Energy Points">Energy Points</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="universe.php" title="Role-Playing In A Sailor Moon Universe">Chapter 4: RPing In A SM Universe</a>
<ul class="smaller10"><li><a href="japan.php" title="Japan And Tokyo">Japan And Tokyo</a></li>
<li><a href="#" title="Maps Of Japan And Tokyo">Maps Of Japan and Tokyo</a></li>
<li><a href="places.php" title="Places In Sailor Moon">Places In Sailor Moon</a></li>
<li><a href="timeline.php" title="Sailor Moon Timeline">Sailor Moon Timeline</a></li>
<li><a href="kingdom.php" title="The Moon Kingdom">The Moon Kingdom</a>
<ul class="smaller11"><li><a href="kingdom.php#light" title="The Kingdom Of Light">The Kingdom Of Light</a></li>
<li><a href="kingdom.php#members" title="Members Of The Royal Court">Members Of The Royal Court</a></li>
<li><a href="kingdom.php#planetary" title="The Planetary Kingdoms">The Planetary Kingdoms</a></li>
</ul>
</li>
<li><a href="negaverse.php" title="The Negaverse">The Negaverse</a>
<ul class="smaller12"><li><a href="negaverse.php#known" title="What Is Known">What Is Known</a></li>
<li><a href="negaverse.php#unknown" title="Speculation On What Is Unknown">Speculation On Unknown</a></li>
</ul>
</li>
<li><a href="makaiju.php" title="Planet Of Makaiju">Planet Of Makaiju</a>
<ul class="smaller13"><li><a href="makaiju.php#campaign" title="Campaign And Setting Questions">Campaign & Setting Questions</a></li></ul>
</li>
<li><a  href="crystal.php" title="Crystal Tokyo">Crystal Tokyo</a>
<ul><li><a href="crystal.php#campaign" title="A Crystal Tokyo Campaign">A Crystal Tokyo Campaign</a></li></ul>
</li>
<li><a href="nemesis.php" title="Nemesis, The Dark Moon">Nemesis, The Dark Moon</a></li>
<li><a href="life.php" title="School Life In Japan">School Life In Japan</a></li>
<li><a href="advice.php" title="Advice For The Player">Advice For The Player</a></li>
</ul>
</li>
</ul>

<!--Side Drop Down Menu 2 HTML-->

<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite smaller1">
<li><a href="heroes.php" title="Heroes">Heroes</a></li>
<li><a href="villains.php" title="Villains">Villains</a></li>
</ul>

 

CSS:

/* Main Sailor Moon screen styles */
body {color: #0066CC}
h1, h2, h3, h4, h5, h6 {font-family: sans-serif; color: #008080}
address {color: teal; font-style: normal; font-variant: small-caps; text-align: center; clear: both; border-top: 1px solid orange}

#head {text-align: right; border-bottom: 1px solid orange}

li.newgroup {margin-top: 15px}
#main {width: 80%; float: left; padding-left: 10px; margin-top: -20px; padding-bottom: 10px}

p {text-indent: 30pt}
b {color: #000066;}
a img {border: none;}

address a:link {text-decoration: none; font-size: 14pt; color: teal}
address a:visited {text-decoration: none; font-size: 14pt; color: teal}
address a:hover {text-decoration: underline; color: black; font-size: 14pt}
address a:active {text-decoration: none; color: teal; font-size: 14pt}
address a.select {text-decoration: underline; color: black; size: 14pt}

#example {background-color: rgb(213, 222, 246); margin-right: 10px; padding: 10px; border: 2px solid black; color: rgb(53, 115, 141);}

input, textarea, select, button {font-family: arial; background:#99CCFF; color:#0000ff; border style: solid; word-wrap: break-word; border-width: 2px;}

#stats {border-style: ridge; table-column: right; border-width: 3px;}
#th {background-color: black; color: white; text-align: center; font-weight: bold;}
.right {text-align: right;}
.sub {font-weight: bold;}
.left {text-align: left;}

#menu {
  padding:0;
  margin:0;
  }
#menu li {
  list-style-type:none;
  }
.indent {text-indent: 20px;}
.indent2 {text-indent: 40px;}

 

I want it to wrap around underneath the menu bar on the left hand side, so that more can fit in the space to the right. Is there a way to make this main div container more "fluid" in that way?

Link to comment
Share on other sites
dbrimlow Member

dbrimlow

Posted
Posted

Simply put the menu bar inside the main content container.

 

WHY you even bothered to slap a table there when you crafted your lists perfectly is beyond me.

 

Lose those tables and table cells where they don't belong (for layout), you already have most of your wire-frame done right anyway. A perfect example of PROPER use of tables would be for the two rows of data below "Sailor Moon" ... THAT is tabular data.

 

Here is the general concept of what you are trying to do:

 

 

<div id="pagecontainer">
<div id="maincontent">
<ul class="nav_menu">
<li><a href="home.php" title="Home Page">Home</a></li>
<li><a href="#" title="Getting Started" rel="ddsubmenuside1">Getting Started</a></li>
<li><a href="creationform.php" title="Create Character">Create Character</a></li>
<li><a href="#" rel="ddsubmenuside2" title="Members">Members</a></li>
<li><a href="newsandevents.php" title="News And Events">News And Events</a></li>
<li><a href="glossary.php" title="Glossary">Glossary</a></li>
<li><a href="topiclist2.php" title="Battle Board">Battle Board</a></li>
<li><a href="chat/chatframe.php" title="Battle Chat Lounge">Battle Chat Lounge</a></li>
<li><a href="about.php" title="About Us">About Us</a></li>
<li><a href="news.php" title="Newsletters">Newsletters</a></li>
<li><a href="invite.php" title="Invite Friends">Invite Friends</a></li>
<li><a href="topiclist.php" title="Discussion Board Forum">Discussion Board</a></li>
<li><a href="faq.php" title="Frequently Asked Questions">FAQ</a></li>
<li><a href="contact.php" title="Contact Us">Contact Us</a></li>
</ul>
<h2>The Magical Girl Genre</h2>
<p>The  magical girl genre has a rather long and important history in Japan.  The magical girls of Japanese animation (or anime) are a rather unique  group of characters. They defy easy classification, and yet contain  elements from many of the best-loved fairy tales and children's stories  throughout the world. Many countries have imported these stories for  their children to enjoy (most notably Italy and Spain) but this  particular genre of anime still remains mostly unknown to much of the  English speaking world. </p>
<table class="data">
  <tr>
   <td>Charactor Name:</td>
   <td>Surino Tsukino</td>
  </tr>
  <tr>
   <td>Element of Influence:</td>
   <td>Purity And the Soul</td>
  </tr>
</table>
</div>
</div>

 

basic css layout - you want the nav menu to float left of the all semantic content - with a small right and bottom margin to provide space between the wrapped content. I also made widths and fonts relative size so it auto fits all screens:

body {font-size:small}
#pagecontainer {width:100%; margin:0 auto}
#maincontent (width:90%; margin: .9em}
.nav_menu {float:left; width:20%; margin: 0 .5em .5em 0}
h2.page_title {display:block; margin:0 auto; font-size: 1.3em}
.data {width:60%; margin:0 auto}

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.