Forum:

HTML Pages with CSS and JavaScript

problems with two divs sitting next to the other.

Ranch Hand

Posts: 421

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am having a problem with divs sitting side by side. If you launch this page, you will see a black rectangle with the name Description on it and it is sitting next to a blue box. The blue box and the black rectangle do not have any space between them despite all my efforts.

I have to use the marquee, so I cannot use relative or absolute position nor can I float the black rectangle right.

Thanks,
Michele

<html>

<head>  
      
      
     <style type="text/css">
   	body{font:normal 0.9em arial;margin:.1em;background-color:black;color:white;background: none repeat scroll 0 0 hsl(0, 0%, 98%);height:100%}
     	
    
  	div.container{border:solid 2px #ffffff; height:100%;width:100%;top:0;right:0;left:0;bottom:0;}
     	div.container2{border:solid 2px #ffffff; height:100%;width:100%;top:0;right:0;left:0;bottom:0; min-height:100%;width: 100%;min-width: 100%;background-repeat:repeat-x;
    	z-index:2;overflow:marquee-line;}
    	
 	 	
     	div.content{margin:2em;}
  	div.ex {padding:10px;border:3px solid white;margin:0px;}
 	div.noex {padding:10px;border:0px solid white;margin:0px;}
  	div.p.thick {font-weight:bold;margin-left:2.5px;}
 	.inner {
        border: 2px dashed #999;
        height: auto;
        margin: 1%;
       	margin-left: 1%;
    	}

.outer {
        border: 2px;
        margin: 2.5px;
    	}

p.padding
      	{
      	padding:3px 3px;
      	}
     
     	p.padding2
      	{
      	padding:3px 3px;
      	}

p.margin
    	{
    	margin:100px 50px;
    	}
     
     
    	table.heading{border:solid 1px;border-collapse:collapse;empty-cells:show;margin:0;padding:1px;width:100%;}     
 	table.heading td, table.heading th{padding:0.1em 0.5em 0.1em 0.5em;}

p.dashed {border-style:dashed;padding:3px;border-color:yellow;color: white;}
	p.thick {font-weight:bold;}

/* special classes */
	.clear { clear: both; }
    
     
     
      </style>

<div id="container2" style="min-width:750px; width: auto !important; "> 
<marquee id="test" behavior="scroll" height="100%" width="100%" direction="up" >
         
     
		    
            <div>
              <div id="menu" style="min-height:250px;min-width:250px;background-color:#2B37E0;width:25%;float:left;" class="ex" width="25%"><h3>Some text goes here.</h3>
              
          	
              <div id="menu" style="background-color:#0E1CE3;" class="inner">
              <p class="padding"><font size="2"><i>Posted on:</i></font><br />
               
              <font size="2"><i>Posted by:</i></font><br />
              
               
              <font size="2"><i>Address:</i></font><br/>
              
              <font size="2"><i>City:</i></font><br/> 
              
              <font size="2"><i>State:</i></font><br/>
              
              <font size="2"><i>ZIP:</i></font><br/>
              
              <font size="2"><i>Geographic Coordinates:</i></font><br/> 
             
              <font size="2"><i>Map It:</i></font><br/>

<font size="2"><i>County:</i></font><br/>
              
              <font size="2"><i>District:</i></font><br/>

</p>       
              
                
                
               
              </div>
                
                
           </div>
      
          
      
          <div id="content2" style="background-color:#000000;width:75%;display:block;inline:5px;overflow:hidden;min-width:700px;width: auto !important; ">
            <div class="padding2" style="border:3px">
            <h1>Description:</h1> 
          
         	<h2>Dynamic FieldName Here</h2> <br/>
           <div style="float:right"> 
       		<viewlink name="XYZ Events" type="button" board="XYZ Events" >Edit/Update</viewlink><br/></div>
          	</div>
          </div>
      
      
         <div style="clear:both;"></div>
          
          <div id="footer2">
            <p class="dashed" style="font-size:80%;">Warning: Text Goes Here</p>
          </div>

</marquee>

</div>
</body>
</html>

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

A couple of things to get out of the way:

As pointed out in the other post, you do not need to use non-standard marquee; you can achieve the same effect (and likely much more smoothly) with script. (jQuery animation makes it easy. See chapter 5 of jQuery in Action (2nd Ed) if you have it.)

The font tag is deprecated. Use CSS for styles.

You're using HTML comment delimiters to comment out CSS. That's not valid.

Why does the use of marquee preclude using float?

The way I would approach this is to:

Ditch the non-standard and deprecated markup. No <marquee>. No <font>. No <i>.

Use jQuery animation instead of marquee.

Float the left column.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Michele Smith

Ranch Hand

Posts: 421

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Good advice, thanks.

I wonder, where would I find this animated vertical scroller? I have been searching and cannot find anything other than kinda of what I am dealing with.

Any suggestions appreciated.

Many Thanks,
Michele

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Here's a fiddle that demonstrates one easy technique I use to get side by side divs.

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Michele Smith wrote:I wonder, where would I find this animated vertical scroller? I have been searching and cannot find anything other than kinda of what I am dealing with.

It's almost trivially easy with the jQuery .animate() method. Simply manipulate the top value.

[Asking smart questions] [About Bear] [Books by Bear]

Chetan Charadva

Greenhorn

Posts: 5

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You should change your code as suggested by Bear Bibeault. But if you still do not want to change the code and want to achieve the same behavior, then apply the style "margin-left" to "content2" div. The value will be greater 25%, as your "menu" div has 25% width.

One more example of side by side div: http://jsfiddle.net/wgmjX/

Michele Smith

Ranch Hand

Posts: 421

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks for the fiddle, I liked it a lot.

thanks again,
Michele

Bear Bibeault

Sheriff

Posts: 67752

173

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Michele Smith, your post was moved to a new topic. I figured the scrolling discussion deserved its own topic separate form the layout discussion.

[Asking smart questions] [About Bear] [Books by Bear]

Michele Smith

Ranch Hand

Posts: 421

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello, I am experiencing difficulty with the div titled content

What happens is it does not line up appropriately when dynamically populating the div. The first div in the recordset populates this area fine but the others are not lining up appropriately.

When I try the below referenced absolute tag, the area populates just fine however, the second and third, to the zzzz of the recordset does not look good at all.

I would like to try to avoid using the absolute tag altogether.

Below is my code, sorry for the spaces,

<html>
	<head>  
    <title></title>
      
      <script src="../javascripts/prototype.js" type="text/javascript"></script>
	  <script src="../javascripts/slider.js" type="text/javascript"></script>
      
      		
      <script src="../javascripts/setUpPanels.js" type="text/javascript"></script>
      
        
   <style type="text/css">
   body{font:normal 0.9em arial;margin:.1em;background-color:black;color:white;}
     
    
  div.container{border:solid 2px #ffffff; height:100%;width:100%;top:0;right:0;left:0;bottom:0;}
     div.container2{border:solid 2px #ffffff; height:100%;width:100%;top:0;right:0;left:0;bottom:0; min-height:100%;width: 100%;min-width: 100%;
    z-index:2;overflow:marquee-line;}
    	
 	 	
    div.content{margin:2em;}
  	div.ex {padding:10px;border:3px solid white;margin:0px;width:100%;}
 	div.noex {padding:10px;border:0px solid white;margin:0px;width:100%;}
  	div.p.thick {font-weight:bold;margin-left:2.5px;width:100%;}
 	.inner {
        border: 2px dashed #999;
        height: auto;
        margin: 1%;
       	margin-left: 1%;
    	}

.inner2 {
        border: 2px;
        height: auto;
        margin: 1%;
       	margin-left: 1%;
    	}

.outer {
        border: 2px;
        margin: 2.5px;
    	}

p.padding
      {
      padding:3px 3px;
      }
     
     p.padding2
      {
      padding:3px 3px;
      }

p.margin
    {
    margin:100px 50px;
    }
     p {
  text-indent: 3em;
	} 
     
    table.heading{border:solid 1px;border-collapse:collapse;empty-cells:show;margin:0;padding:1px;width:100%;}     
 	table.heading td, table.heading th{padding:0.1em 0.5em 0.1em 0.5em;}

p.dashed {border-style:dashed;padding:3px;border-color:yellow;color: white;}
	p.thick {font-weight:bold;}

#tdFilter{text-align:right;}
  	#tdBoard{text-align:left;}
          
     /* special classes */
	.clear { clear: both; }
    
     img.bottom {vertical-align:text-bottom;}
     
     
     /*styles for the slider*/
     
     
     #track1-left {
				position: absolute;
				width: 5px;
				height: 9px;
				background: transparent url(../images/slider-images-track-left.png) no-repeat top left;
			}
			
			/* put the track and the right rounded edge on the track */
			#track1 {
				background: transparent url(../images/slider-images-track-right.png) no-repeat top right;
			}
     
     
     
      
      
      /* the panel collapse styles go here*/
   
		
		/* panel */
.panel, .panelcollapsed 
{
	background: #3929F0;
	margin: 5px;
	padding: 0px 0px 5px;
	width: 100%;
	border: 1px solid #999;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

/* panel heading */
.panel h2, .panelcollapsed h2 
{
	font-size: 18px;
	font-weight: normal;
	margin: 0px;
	padding: 4px;
	background: #3929F0 url(../images/arrow-up.gif) no-repeat 1000px;
	border-bottom: 1px solid #999;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
}

/* panel heading on rollover */
.panel h2:hover, .panelcollapsed h2:hover { background-color: #C5D6FC;color:#000000; }

/* heading of a collapsed panel */
.panelcollapsed h2 
{
	background: #2B37E0 url(../images/arrow-dn.gif) no-repeat 1000px;
	border-color: #CCC;
}

/* panel content - do not set borders or paddings */
.panelcontent 
{ 
	background: #ffffff;
	color:#000000; 
	overflow: hidden;
}

/* collapsed panel content */
.panelcollapsed .panelcontent { display: none; }

</style>
      
  	</head>

<body>
 

      
<div class="container agencytemplate_boardbackground">
          <table class="heading agencytemplate_boardheader" border="0" value="none">
            <tbody>
            <tr>
            <td selected="false" style="FONT-SIZE: 14pt"></td>
            
            <td id="tdFilter" selected="false" rowSpan="2" align="right"><incidentname></incidentname></td>
            </tr>
            
            <tr class="">
            <td id="tdIncident" selected="false" style="FONT-SIZE: 14pt" rowSpan="1">Indiana Department of Homeland Security</td>
            </tr>
            
            <tr>
            <td id="tdBoard" colSpan="2" selected="false" style="FONT-SIZE: 24pt"><agencyinfo type="primarylogo"></agencyinfo><position></position>Events</td>
            </tr>
            
            <tr>
            <td align="left" id="tdBoard" selected="false" style="FONT-SIZE: 24pt" rowSpan="1">
              
              <div class="bottom">
             
  </div>
  
  
  
  
      			</td>
              <td id="tdBoard" align="right"><eocfield name="username"></eocfield>
      
      
      
      			</td>
            </tr>
            </tbody>
            </table>

</div>

<table>
  <tr>
    <td>
  <viewlink name="district Events" type="button">New Entry</viewlink></td>
  
      <td>  
   <printbutton value="Printable View"></printbutton></td>
       <td>      
  <viewlink name="test" type="button">Map It</viewlink></td>
  
  <td>
   
              <filterbutton name="Hide Removed" group="typeFilter">
                <on>Hide Removed</on>
                <off>Show Removed</off>
              </filterbutton></td>
           <td>
              <select name="districts" list="districts"></select></td>
              
              
             
      		 
      			
            
	<td valign="baseline">
	<div id="track1" style="width:200px; height:9px;">
			<div id="track1-left"></div>
  			<div id="handle1" style="width:19px; height:20px;">
              	<img src="../images/slider.png" alt="Interactive Slider" style="float: left;"/></div>

</div>

// ]]>
		</script>
    </td>

<div id="wrap" class="panel" style="display: inline;"><eocrepeatallrecords> 
  <h2>Incident Number Information Goes Here</h2>

</div>

</div></eocrepeatallrecords> 
  </div>
         
          
          <div id="footer2">
            <p class="dashed" style="font-size:80%;">Warning: .</p>
          </div>

</body>
</html>

It's just like a fortune cookie, but instead of a cookie, it's pie. And we'll call it ... tiny ad:

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing