Solved

How can I get this table to diplay inline with my other divs?

Posted on 2015-02-17
9
68 Views
Last Modified: 2015-02-17
Here's my code:

<div class="content">

	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; d"><span>this is perfect</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#b4b4b4; display:inline-block; text-align:center;"><span>graph #2</span></div>
	<div style="width:1200px; height:500px; background-color:#000000; color:#ffffff; margin-top:15px; text-align:center;"><span>graph #3</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #4</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #5</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #6</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #7</span></div>
</div>

Open in new window


...and here's what it looks like:

screenshot
Now, if I attempt to add a table within the div that says, "this is perfect," look what happens:

another screenshot
I've got all my divs happening exactly as I wanted them having no idea that adding a table into the mix would mess things up. What do I need to change so I can place a table within a div and have the architecture of my site not blow up?

Thanks!
0
Comment
Question by:brucegust
  • 4
  • 3
  • 2
9 Comments
 
LVL 11

Expert Comment

by:N R
ID: 40615153
Can you link me to the live site so I can see the code?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40615225
The short answer is don't use a table.  They do not obey the normal layout rules.  Without knowing what the table is being used for, it is impossible to knw if it is a correct use.  If the table is the correct element to be using then you have to start developing the layout from the table and adjust the other elements to the table, because if you try and stick the table into a layout it will not drop in without a problem most of the time.

Cd&
0
 

Author Comment

by:brucegust
ID: 40615256
Nathan, here's the code. It's an intranet site so it's not "live," but the only things that you would be missing would be the header and footer images, which aren't crucial.

Here's my html:

<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>CSS Layout Test</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/blitzer/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/grouped-categories.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip		  
	}).mousemove(function(e) {
		var mousex = e.pageX + 5; //Get X coodrinates
		var mousey = e.pageY + 5; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip
		
		//Distance of element from the right edge of viewport
		var tipVisX = $(window).width() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 5 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 5;
		} if ( tipVisY < 5 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 5;
		} 
		tip.css({  top: mousey + 10px, left: mousex + 10px });
	});
});
</script>
</head>

<body>



<div class="nav_bar">
	<div class="navcontainer">
		<ul>
		<li><a href="index.php" class="home"></a></li>
		<li><a href="#" class="regions"></a>
			<ul>
			<table class="regions" width="900">
				<tr>
					<td class="regions_header">Carolina / Tennessee</td>
					<td class="regions_header">Florida</td>
					<td class="regions_header">Georgia / Alabama</td>
					<td class="regions_header">Houston Gulf Coast</td>
					<td class="regions_header">South Central</td>
					<td class="regions_header">Central Texas</td>
				</tr>
				<tr>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://vzwcarolinastennessee.com/" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwflorida.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwgeorgiaalabama.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwhoustongulfcoast.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwsouthcentral.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://www.vzwcentraltexas.com" target="_blank" class="nav_menu_td">region news</a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>					
			</ul>					
		</li>
		<li><a href="planning.php" class="planning"></a>
			<ul>
			<table class="regions" width="700">
				<tr>
					<td class="regions_header"><a href="" class="nav_menu_th">RF Planning</a></td>
					<td class="regions_header"><a href="" class="nav_menu_th">Data Planning</td>
					<td class="regions_header">Network Implementation</td>
					<td class="regions_header">Power and Ground</td>
					<td class="regions_header">Transport</td>
				</tr>
				<tr>
					<td>
						&nbsp;
					</td>
					<td>
					&nbsp;
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Current Projects Update</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Team Website</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://soareatransportreporting.south.vzwcorp.com/Default.aspx" class="nav_menu_td" target="_blank">Area Reports</a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>					
			</ul>	
		</li>
		<li><a href="budget_reports.php" class="budget"></a>
			<ul style="margin-left:-300px;">
			<table class="regions">
				<tr>
					<td class="regions_header">Tools & Reporting</td>
					<td class="regions_header">Financial Planning & Analysis</td>
					<td class="regions_header" style="width:100px;">Inventory</th>
					<td class="regions_header">Real Estate</td>
					<td class="regions_header">Compliance</td>
					<td class="regions_header">Code Administration</td>
				</tr>
				<tr>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Current Development Project List</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://southareanetwork.nss.vzwnet.com/project_request.php" class="nav_menu_td">New Development Project Request</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">NSS Application Summary</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="https://portal.vh.vzwnet.com/aeportal/" class="nav_menu_td" target="_blank">NSS Portal</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://stakeholder.south.vzwcorp.com/" class="nav_menu_td">360 Survey Tool</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
								<tr>
								<td class="regions_list"><a href="http://budgettools.south.vzwcorp.com/default.aspx?aid=1&bpid=" class="nav_menu_td" target="_blank">Capital Budget Tool</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://expensebudgettool.south.vzwcorp.com/default.aspx" class="nav_menu_td" target="_blank">Expense Budget Tool</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://netadmin.nss.vzwnet.com/asset-management/cip-dashboard/" target="_blank" class="nav_menu_td">CIP Dashboard</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list" style="width:100px;"><a href="http://txslsaiapw1v.nss.vzwnet.com/" class="nav_menu_td" target="_blank">Inventory Tool</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list" style="width:100px;"><a href="http://sarrealestatetracker.south.vzwcorp.com/Default.aspx" class="nav_menu_td" target="_blank">Real Estate Tracker</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="http://10.215.213.203/c2/vzwcompreg/content.nsf/lookup.htmlpages/mainframe.html?open" class="nav_menu_td" target="_blank">Network Compliance and Regulatory</a></td>
							</tr>
						</table>
					</td>
					<td>
						<table class="regions_list">
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">Team Members</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="" class="nav_menu_td">File Library</a></td>
							</tr>
							<tr>
								<td class="regions_list"><a href="http://txslcarxpa1v.nss.vzwnet.com/CARRIE/eng/Lerg/index.cfm" class="nav_menu_td" target="_blank">CARRIE</a></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>					
			</ul>	
		</li>
		<li><a href="" class="system_perf"></a>
			<ul class="tool_list">
				<table class="regions" width="150">
					<tr>
						<td class="regions_header"><a href="http://sasysperf/index.php" target="_blank" class="nav_menu_th">Area System Performance</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href=""class="nav_menu_td">Reporting Website</a></td>
								</tr>
								<tr>
									<td class="regions_list"><a href="http://saportal.south.vzwcorp.com/LTEOffload/Index"class="nav_menu_td" target="_blank">LTE Offload Tool</a></td>
								</tr>
								<tr>
									<td class="regions_list"><a href="https://cloudsites.vzbi.com/sites/SAMonthlyReporting/_layouts/15/start.aspx#/SitePages/Home.aspx "class="nav_menu_td" target="_blank">Monthly Reporting Sharepoint</a></td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
				</table>
			</ul>
		</li>
		<li><a href="network_ops.php" class="network_ops"></a>
			<ul class="tool_list">
				<table class="regions" width="200">
					<tr>
						<td class="regions_header">Network Operations</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href="http://txsltwp1v.nss.vzwnet.com/translations/" class="nav_menu_td" target="_blank">Translations Website</a></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</ul>
		</li>
		<li><a href="reference.php" class="reference"></a>
			<ul class="tool_list">
				<table class="regions" width="150">
					<tr>
						<td class="regions_header">Organization</td>
						<td class="regions_header">Systems</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href="faq_list.php" class="nav_menu_td">FAQs</a></td>
								</tr>
								<tr>
									<td class="regions_list"><a href="" class="nav_menu_td">Acronymns</a></td>
								</tr>
							</table>
						</td>
						<td>
							<table class="regions_list">
								<tr>
									<td class="regions_list"><a href=""class="nav_menu_td">File Library</a></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</ul>	
		</li>
		<li><a href="exec_reports.php" class="reports"></a>
			<ul class="tool_list">
				<table class="regions">
					<tr>
						<td class="regions_header">Finanical Planning and Analysis</td>
					</tr>
					<tr>
						<td>
							<table class="regions_list">
								<tr>
									<td><a herf="http://netadmin.nss.vzwnet.com/asset-management/cip-dashboard/" target="_blank" class="nav_menu_id">CIP Dashboard</a></td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</ul>
		</li>
		</ul>
	</div>
</div>
<div style="position:absolute; z-index:20;">
<a class="tip_trigger" href="">
<IMG SRC="images/thumbs_up.png" border="0">
	<span class="tip">
	This application comes to you courtesy of Nelson DelValle.
	</span>
</a>
</div>
<div class="content">
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; d"><span><table border="1"><tr><td>hello</td></tr></table></span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#b4b4b4; display:inline-block; text-align:center;"><span>graph #2</span></div>
	<div style="width:1200px; height:500px; background-color:#000000; color:#ffffff; margin-top:15px; text-align:center;"><span>graph #3</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #4</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #5</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #6</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #7</span></div>
</div>

<div class="footer"><br>&copy; Verizon Wireless | South Area | All Rights Reserved | <a href="http://southareanetwork.nss.vzwnet.com/contact.php" style="color:#ffffff; text-decoration:none;">Contact</a></div></body></html>

Open in new window


and here's my CSS:

html { 
  height: 100%;
}

body {
margin:0;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 11pt;
height:100%;
width:100%;
}

.nav_bar {
position:relative;
margin-top:0px;
background-image:url(../../images/nav_bar_background.png);
height:29px;
width:100%;
min-width:1300px;
background-repeat:repeat-x;
z-index:5;
}

.navcontainer {
margin:auto;
width:1300px;
height:29px;
position:relative;
z-index:6;
}

.navcontainer ul {
position: absolute;
padding:0;
margin: 0px;
list-style-type:none;

}

/*here's my list characteristics as far how things are displayed and how they're "floated" */
.navcontainer ul li {
position: relative;
display: block;
float: left;
margin-left:35px;
z-index:10;
}

.navcontainer ul li a {
text-decoration: none;
display: block;
padding-right: 0px;
}

/* this command tells my li's within the first tier of ul's to bust out with a pulldown menu */
.navcontainer ul li:hover > ul 
{
display: block;
}

/* now we're getting jiggy with it by establishing the rules for the actual pulldown menu */
.navcontainer ul ul {
display: none;
background: none;
margin-top: 0px;
padding-top: 0;
position: absolute;
background: rgba(204,204,204, .7);
border-style:solid;
border-width: thin;
border-color:#cccccc;
line-height:35px;
height:auto;
z-index:100;
border-radius:6px;
-moz-border-radius:6px;
}

.navcontainer ul ul li {
float:none;
margin:0px;
padding:0;
}

.navcontainer ul ul li a {
display: block;
float:none;
margin: 0 0 0 10px;
padding: 0;
font-family: Helvetica, Microsoft Sans Serif;
font-size: 18px;
padding-left:0px;
z-index:10;
}	

.navcontainer ul ul li:hover > ul 
{
display: block;
}

.navcontainer ul ul li:hover {
display:block;
}

.navcontainer:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

a.home {
display:inline-block; /**** important ****/
margin-top:5px;
width:39px;
height:12px;
background-image:url(../../images/button_home.png);
background-repeat:no-repeat;
}

a.regions {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:51px;
height:29px;
background-image:url(../../images/button_regions.png);
background-repeat:no-repeat;
}

a.planning {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:58px;
height:29px;
background-image:url(../../images/button_planning.png);
background-repeat:no-repeat;
}

a.budget {
display:inline-block;
margin-top:5px;
margin-left:25px;
width:189px;
height:29px;
background-image:url(../../images/button_budget.png);
background-repeat:no-repeat;
}

a.system_perf {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:150px;
height:29px;
background-image:url(../../images/button_system_perf.png);
background-repeat:no-repeat;
}

a.network_ops {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:132px;
height:29px;
background-image:url(../../images/button_network_ops.png);
background-repeat:no-repeat;
}

a.reference {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:66px;
height:29px;
background-image:url(../../images/button_reference.png);
background-repeat:no-repeat;
}

a.reports {
display:inline-block; /**** important ****/
margin-top:5px;
margin-left:25px;
width:120px;
height:29px;
background-image:url(../../images/button_reports.png);
background-repeat:no-repeat;
}

a.footer_link {
color:white;
text-decoration:none;
}

table.csv_sample {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:auto;
border: 1px solid #d7d4d4;
 }
 
 table.page_display {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:650px;
border: 1px solid #d7d4d4;
 }
 
 td.csv_sample {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#cccccc;
 }
 
  td.csv_sample_black {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#000000;
 color:#ffffff;
 font-weight:bold;
 }
 
 td.csv_sample_cell {
padding:5px;
border-collapse: collapse;
border: 1px solid grey;
 }
 
 td.title {
 text-align:right;
 }
 
 table.regions {
border:none;
 margin:auto;
 }
 
 table.regions th {
 border: 1px solid #ffffff;
 background-color:#282828;
 height:20px;
 line-height:20px;
 text-align:center;
 font-weight:normal;
 color:#ffffff;
 width:auto;
 }
 
  table.regions td.regions_header {
 border: 1px solid #ffffff;
 background-color:#282828;
 height:20px;
 line-height:20px;
 text-align:center;
 font-weight:normal;
 color:#ffffff;
 white-space:nowrap;
 }
 
 
 table.regions td {
 line-height:20px;
 text-align:center;
 vertical-align:top;
 width:300px;
 height:20px;
 white-space:nowrap;
 }
 
 table.regions_list {
 border-radius:6px;
-moz-border-radius:6px;
background-color:#ffffff;
 border: 1px solid #cccccc;
 }
 
 table.regions_list td {
 text-align:left;
 line-height:20px;
 height:20px;
 }
 
 a.nav_menu_th {
text-decoration:none;
color:#ffffff;
}
a.nav_menu_th:hover {
text-decoration:underline;
color:#ffffff;
}

a.nav_menu_th:visited {
text-decoration:none;
color:#ffffff;
}

a.nav_menu_td {
text-decoration:none;
color:#000000;
}
a.nav_menu_td:hover {
text-decoration:underline;
color:#000000;
}

a.nav_menu_td:visited {
text-decoration:none;
color:#000000;
}

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background-image:url(../../images/footer.jpg);
background-repeat:repeat-x;
font-size:9pt;
color:#ffffff;
text-align:center;
}

a.footer_link {
color:white;
text-decoration:none;
}

.content {
 width:1200px;
 margin:auto;
 margin-top:25px;
 margin-bottom:35px;
 height:100%;
 background-color:#454545;

}

span {
position: relative;
top: 50%;
transform: translateY(-50%);
}


.tip {
background-color:#ffffff;
filter:alpha(opacity=95);
display:none; /*--Hides by default--*/
padding:10px;
position:absolute;    
z-index:1000;
text-decoration: none;
background-color:#ffffff; 
border: 1px solid #cccccc;
color:#000000;
box-shadow: 7px 7px 15px #e9e9e9;
border-radius:6px;
-moz-border-radius:6px;
margin:auto;
width:300px;
height:45px;
border: 1px solid #d7d4d4;
}

Open in new window


I appreciate your help!

And CD&, I get it, but in this instance, it's not my code and the table is regurgitating some database driven stuff, so I really want to try to figure out a way to make this work before I punt and have to start all over.
0
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 11

Accepted Solution

by:
N R earned 500 total points
ID: 40615282
Are you wanting to pull the grey boxes back together like this?

http://gallitin.com/eetest.php

If so you can change your current code (notice float left on the first div):
<div class="content">
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center;"><span><table border="1"><tr><td>hello</td></tr></table></span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#b4b4b4; display:inline-block; text-align:center;"><span>graph #2</span></div>
	<div style="width:1200px; height:500px; background-color:#000000; color:#ffffff; margin-top:15px; text-align:center;"><span>graph #3</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #4</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #5</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #6</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #7</span></div>
</div>

Open in new window


to

<div class="content">
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center;float:left;"><span><table border="1"><tr><td>hello</td></tr></table></span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#b4b4b4; display:inline-block; text-align:center;"><span>graph #2</span></div>
	<div style="width:1200px; height:500px; background-color:#000000; color:#ffffff; margin-top:15px; text-align:center;"><span>graph #3</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #4</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #5</span></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #6</span></div>
	<div style="width:11px; height:5px; background-color:#898989; display:inline-block; text-align:center;"></div>
	<div style="height:370px; width:590px; background-color:#cccccc; display:inline-block; text-align:center; margin-top:10px;"><span>graph #7</span></div>
</div>

Open in new window

0
 

Author Comment

by:brucegust
ID: 40615354
Nathan, that worked, but why did it work?

I started with using "floats" for all my divs, then found an article that recommended a simpler approach using the inline-block dynamic. I've never seen "display:inline-block" AND "float:left;" in the same div. Why does that work?

Thanks for your help!
0
 
LVL 11

Expert Comment

by:N R
ID: 40615372
Hmm...not sure, when trying to stack divs next to each other I've always used floats.

One of the experts on the question above may be able to explain further.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40615400
The inline-block value causes a block element like a div to behave like a replaced element.  What is a replaced element you ask?

This is how MDN describes it:

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.

CSS handles replaced elements specifically in some cases, like when calculating margins and some auto values.

Note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties like vertical-align.


Cd&
0
 

Author Comment

by:brucegust
ID: 40615489
Thank you, gentlemen! Much appreciated - not just the "what" but the "why" as well!
0
 

Author Comment

by:brucegust
ID: 40615490
0

Featured Post

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
HTML and CSS for a complex page 20 71
Error in JQuery 5 52
move widget title down 4 18
Create tabs to show divs 9 30
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question