• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 362
  • Last Modified:

Align div side-by-side

Hi.
I have this html:
<div id='container'>

<div id='nav'>
<span id='nav1'>Navigation1</span><img id='img1'  src='nav1.png' /><br><br>
<span id='nav2'>Navigation2</span><img id='img2'  src='nav2.png' /><br><br>
<span id='nav3'>Navigation3</span><img id='img3'  src='nav3.png' /><br><br>
<span id='nav4'>Navigation4</span><img id='img4'  src='nav4.png' /><br><br>
<span id='nav5'>Navigation5</span><img id='img5'  src='nav5.png' /><br><br>
<span id='nav6'>Navigation6</span><img id='img6'  src='nav6.png' /><br><br>
</div>
<div id='div1'>
<div id='idivp'>
<center>
<img src='cosby.jpg'/>
</center>
</div>
<center>
<img id='dotselect1' src='dotbutton.jpg' />
<img id='dotselect1' src='dotbutton.jpg' />
</center>
</div>
<div class="clear"></div>
</div>

Open in new window


now I'm using jquery to toggle the visibility of "div1", but when it displays, it shows BELOW the "nav" div... this looks awful on the page, but I can't figure out how to make it show up right next to the "nav" div.

Any help please

thanks!
0
JoeD77
Asked:
JoeD77
  • 3
  • 2
1 Solution
 
Lukasz ChmielewskiCommented:
You need to use css property
float: left; and apply it to every div
0
 
Lukasz ChmielewskiCommented:
... every div that has to be next to previous one
0
 
JoeD77Author Commented:
Thanks for your response.
Using this css:
   div#container
   {
   margin: 1%;
   padding: 0;
   width: 97%;
   }
   div#div1
   {
   display:none;
   float: left;
	margin: 0.5in auto;
    color: #fff;
    width: 60%;
    padding: 20px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #000;

   }
   #nav{
	float: left;
   width: 46.5%;
   margin: 1% 0 1% 1%;
   padding: 1%;
}

Open in new window


now instead of showing below "nav1", but centered, it's just showing directly below nav1 on the far left.


0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Lukasz ChmielewskiCommented:
Can you post your full code (with jQuery) ?
0
 
JoeD77Author Commented:
Sure.
<html>
<head>
<script type="text/JavaScript" src="curvycorners.js"></script>
<script type="text/JavaScript">

  curvyCorners.addEvent(window, 'load', initCorners);

  function initCorners() {
    var settings = {
      tl: { radius: 10 },
      tr: { radius: 10 },
      bl: { radius: 10 },
      br: { radius: 10 },
      antiAlias: true
    }

    curvyCorners(settings, "#div1");
  }
</script>
<STYLE type="text/css">
body
{
width:70%;
   margin: 0;
   padding: 0;
}
   span
   {
   width: 50px;
   }
   div#container
   {
   margin: 1%;
   padding: 0;
   width: 97%;
   }
   div#div1
   {
   display:none;
   float: left;
	margin: 0.5in auto;
    color: #fff;
    width: 60%;
    padding: 20px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #000;

   }
   #nav{
	float: left;
   width: 46.5%;
   margin: 1% 0 1% 1%;
   padding: 1%;
}

   img#img1
   {
   visibility:hidden;
   position:fixed;
   right: 77%;
   }
   img#img2
   {
   visibility:hidden;
   position:fixed;
   right: 77%
   }
   img#img3
   {
   visibility:hidden;
   position:fixed;
   right: 77%
   }
   img#img4
   {
   visibility:hidden;
   position:fixed;
   right: 77%
   }
   img#img5
   {
   visibility:hidden;
   position:fixed;
   right: 77%
   }
   img#img6
   {
   visibility:hidden;
   position:fixed;
   right: 77%
   }
   img#leftban
   {
   float: left;
   }
   
   div#leftBanner
   {
   right:90%;
   }
 </STYLE>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<br><br>
<ul id='banner'>
<img id='leftban' src='leftbanner.jpg'/>
</ul>
<div id='container'>

<div id='nav'>
<span id='nav1'>Navigation1</span><img id='img1'  src='nav1.png' /><br><br>
<span id='nav2'>Navigation2</span><img id='img2'  src='nav2.png' /><br><br>
<span id='nav3'>Navigation3</span><img id='img3'  src='nav3.png' /><br><br>
<span id='nav4'>Navigation4</span><img id='img4'  src='nav4.png' /><br><br>
<span id='nav5'>Navigation5</span><img id='img5'  src='nav5.png' /><br><br>
<span id='nav6'>Navigation6</span><img id='img6'  src='nav6.png' /><br><br>
</div>
<div id='div1'>
<div id='idivp'>
<center>
<img src='cosby.jpg'/>
</center>
</div>
<center>
<img id='dotselect1' src='dotbutton.jpg' />
<img id='dotselect1' src='dotbutton.jpg' />
</center>
</div>
</div>
<script>

    $("#nav1").mouseover(function () {
	$("#img1").css({visibility: "visible"});
	});
	$("#nav1").mouseout(function () {
	$("#img1").css({visibility: "hidden"});
	});
	$("#nav1").click(function () {
	$("#div1").show();
	});
	$("#nav2").mouseover(function () {
	$("#img2").css({visibility: "visible"});
	});
	$("#nav2").mouseout(function () {
	$("#img2").css({visibility: "hidden"});
	});
	$("#nav3").mouseover(function () {
	$("#img3").css({visibility: "visible"});
	});
	$("#nav3").mouseout(function () {
	$("#img3").css({visibility: "hidden"});
	});
	$("#nav4").mouseover(function () {
	$("#img4").css({visibility: "visible"});
	});
	$("#nav4").mouseout(function () {
	$("#img4").css({visibility: "hidden"});
	});
	$("#nav5").mouseover(function () {
	$("#img5").css({visibility: "visible"});
	});
	$("#nav5").mouseout(function () {
	$("#img5").css({visibility: "hidden"});
	});
	$("#nav6").mouseover(function () {
	$("#img6").css({visibility: "visible"});
	});
	$("#nav6").mouseout(function () {
	$("#img6").css({visibility: "hidden"});
	});
    </script>
</body>
</html>

Open in new window

0
 
HagayMandelCommented:
What exactly is the content of div1 once it is shown?
As it is now, all you have in your code are 6 lines with a span and an image in each one.

 
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now