Display:block moves text down, :inline hides border

I have a page that shows two different divs depending on which tab you choose - the tabs and the page areas that show or not are all divs. The page switching (done with javascript) is working fine. The tabs show in front or behind by making the tab in front 1 pixel larger in height and z-index=5 (with no bottom border) so that the bottom of the tab covers the border on the page. But if I use display:block and display:none to show and hide the divs, the first line of text starts even with the right side of the first div (when the first div is in front), and the fist line is shifted down roughly one line. If I use inline instead of block, the text moves up where it should be vertically, but still starts to the right of the right hand tab, plus the border around the text disappears. I know that it is the tab div hanging down over the border that moves the first line of text to the right, but is there a way to fix it so this doesn’t happen? And what is with the border disappearing when I use display:inline, and with the text moving down with display:block?

Thanks for any help you can give.

Here is the webpage:
Juvenile Law

Below is the html code for the div:

<div id="tab_one" onclick="switch_tab('page_one')">
	Juvenile Crime
</div>
<div id="tab_two" onclick="switch_tab('page_two')">
	Department of Children's Services Actions
</div>
<div id="page_one">
	<p style="font-size:.8em; margin:0px;">aa&nbsp;</p>
	<p>Juvenile Crimes</p>
	<p>If you child has been arrested and charged with a 
	crime, you and he or she should have been informed of your right 
	to consult with one another about your rights to have an 
	attorney present while being questioned, and about whether or 
	not you wanted to waive those rights. In Indianapolis/Marion 
	County you should have been presented with a waiver form. It is 
	always in your best interest to have an attorney present when 
	being questioned. </p>
</div>
<div id="page_two">
	<h3 style="font-size: 1.1em; font-weight: bold; text-align:center">
	Child in Need of Services (CHINS) and <br />Termination of 
	Parental Rights (TPR)</h3>
	<p>If you are facing the prospect of governmental 
	interference in your relationship with your children through 
	a CHINS or TPR action, you will need someone to fight for 
	your rights and your children's rights. I understand how 
	stressful and intimidating these cases can be. Between us, 
	Mr. Parr and I have over three decades of experience 
	handling CHINS and TPR cases at the trial and appellate 
	levels.</p>

and here is css from the internal style sheet- there are two web pages with tabs, so the tab and page locations are set in an internal style sheet.

<style type="text/css">


#tab_one {
	width:120px;
	height:25px;
	left:0px;
}

#tab_two {
	width:320px;
	height:24px;
	left:6px;
}

#page_one {
	left:0px;
	top:26px;
}

#page_two {
	left:0px;
	top:26px; 
}

</style>

and here is the code from the external style sheet

#tab_one {
	width:132px;
	height:45px;
	margin-top:0px;
	position:relative;
	float:left;
	left:0px;
	text-align:center;
	font-weight:bold;
	padding-top:1px;
	z-index:15;
	cursor:default;
	border:1px black solid;
	border-bottom:none;
	background-color:#DACCAD;
	
}


#tab_two {
	width:142px;
	height:44px;
	position:relative;
	float:left;
	left:6px;
	text-align:center;
	font-weight:bold;
	padding-top:1px;
	z-index:15;
	cursor:pointer;
	border:1px black solid;
	border-bottom:none;
	background-color:#DACCAD;
}


#page_one {
	position:relative;
	left:0px;
	top:46px; 
	width:450px;
	border:1px black solid;
	z-index:0;
	display:block;

	
	
}

#page_two {
	position:relative;
	top:46px;
	left:0px;
	width:450px;
	border:1px black solid;
	z-index:0;
	display:none;
	
}


I have played with this some more, and, as I thought, the problem is definitely the way I have the tab divs set up so that the one I want to be the current tab overlaps the div below by one pixel. The tab divs are position:relative, as are the page contents divs, but the page content divs have ‘top’ set so they start right at the bottom of the tab divs. So when I increase the height of a tab div by 1 px, (no bottom border on the tabs) it covers up the border on the page content div and makes it look like the tab and page are connected. But this tab div impinging over the border of the page content div by that one pixel is doing strange things to text positioning on the page content div. For instance, since the text sits too low, I can set margin-top: to increasingly more negative values. But it just stays there until I hit some value (I think it was 8 pixels) and then it jumps up to right against the top border.

What I want is some reference that explains how text behaves in a div when another divs impinges across that first div’s border, and hopefully some ideas about how to manage the text. Haven’t been able to find any resources that talk about this.

thanks for any help!

Hi,

The text is snagging on the floated tab because it sticks down by that extra 1px.

You need to clear the floats after those tabs to avoid the snagging. Unfortunately adding a clear:both at that point will have the unfortunate effect of also clearing your sidebar because your right column doesn’t create a block formatting context.

In a two column layout you should float both columns to avoid this issue and any clearing will be confined inside the floats. You just have to remember to make sure the parent of both floats also has a clearing mechanism (such as overflow:hidden).

Your left nav is invalid also because you have wrapped anchors around block level elements which is not allowed in html4/xhtml. That nav should be a list structure anyway without all those extra classes needed.

I’ve tidied up the nav and fixed the snagging with the tabs but your header section really needs a re-write and if I get a chance tomorrow I’ll have another look (or someone else can jump in).

Don’t use breaks to make space and never use inline styles as that just makes it so much harder. I haven’t had time to tidy all this up but here’s a start.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="expires" content="Wed, 19 Feb 2003 08:00:00 GMT" />
<link href="LMJLaw.css" rel="stylesheet" type="text/css" />
<style>
#body {
    background-image:url('http://www.lmjattorney.com/images/pageback.jpg');
    font-family:"Times New Roman", Times, serif;
    font-size:12pt;
}
#container_border {
    width:790px;
    border:12px double #663300;
    position:relative;
    margin: 0px auto;
    padding-top:2px;
    padding-bottom:2px;
    margin-top:20px;
    margin-bottom:25px;
}
#container {
    width:780px;
    background-color:#DACCAD;
    position:relative;
    margin: 0px auto;
    color:black;
    border:3px #955C1E solid;
    z-index:5;
}
#header {
    width:772px;
}
#vertical_button_bar {
    width:260px;
    float:left;
    color:#FFFFCC;
    margin-left:10px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    background-color:#663300;
    margin-right:15px;
    margin-bottom:8px;
    border:7px double #CFAF89;
}
#container_body {
    width:770px;
    position:relative;
    padding-top:10px;
    padding-left:5px;
    padding-right:5px;
    border-top:6px #955C1E double;
    background-repeat:no-repeat;
    overflow:hidden;
}
#nav {
    margin:0;
    padding:0;
    list-style:none;
}
#navli {
    display:inline
}
#nav li a {
    background-image:url('http://www.lmjattorney.com/images/buttonback.jpg');
    background-repeat:no-repeat;
    color:black;
    height:28px;
    float:left;
    margin:0 0 20px 10px;
    width:240px;
    padding-top:7px;
    text-decoration:none;
}
.hr95 {
    width:100%;
    height:3px;
    color:#955C1E;
}
#tab_one {
    width:132px;
    height:45px;
    margin-top:0px;
    position:relative;
    float:left;
    text-align:center;
    font-weight:bold;
    padding-top:1px;
    z-index:15;
    cursor:default;
    border:1px black solid;
    border-bottom:none;
    background-color:#DACCAD;
    margin-bottom:-1px;
}
#tab_two {
    width:142px;
    height:44px;
    position:relative;
    float:left;
    left:6px;
    text-align:center;
    font-weight:bold;
    padding-top:1px;
    z-index:15;
    cursor:pointer;
    border:1px black solid;
    border-bottom:none;
    background-color:#DACCAD;
    margin-bottom:-1px;
}
#tab_three {
    width:166px;
    height:44px;
    position:relative;
    float:left;
    left:12px;
    text-align:center;
    font-weight:bold;
    padding-top:1px;
    z-index:15;
    cursor:pointer;
    border:1px black solid;
    border-bottom:none;
    background-color:#DACCAD;
}
#page_one {
    position:relative;
    left:0px;
    width:450px;
    border:1px black solid;
    z-index:0;
    display:block;
    clear:both;
}
#page_two {
    position:relative;
    left:0px;
    width:450px;
    border:1px black solid;
    z-index:0;
    display:none;
    clear:both;
}
#page_three {
    position:relative;
    left:0px;
    width:450px;
    border:1px black solid;
    z-index:0;
    display:none;
    clear:both;
}
#container_right_column {
    width:450px;
    padding:5px;
    /*margin-left:300px;*/
    margin-top:0px;
    float:right;
}
#footer {
    position:relative;
    text-align:center;
    font-size:1em;
    border-top:8px #955C1E double;
    margin-bottom:8px;
    margin-top:6px;
    clear:both;
}
#jla {
    position:relative;
    font-size:.8em;
    float:right;
    bottom:5px;
    right:15px;
    z-index:0;
}
h1 {
    font-size:.8em;
    font-weight:bold;
    text-align:center;
}
h2 {
    font-size:1.2em;
    font-weight:bold;
    text-align:center;
}
h3 {
    font-size:1.1em;
    font-weight:bold;
    text-align:left;
}
h4 {
    font-size:12pt;
    font-weight:bold;
}
h5 {
    font-size:10pt;
    font-weight:normal;
    text-align:center;
}
</style>
<title>Juvenile Law</title>
<script type="text/javascript">
function switch_tab(page_new) {
    var clicked_page = page_new;
    if (clicked_page == 'page_two') {
        var old_page = 'page_one';
        var old_tab = 'tab_one'; 
        var new_tab = 'tab_two'; }
        else  {
        var old_page = 'page_two';
        var old_tab = 'tab_two';
        var new_tab = 'tab_one'; };
        
    var x2=document.getElementById(old_page);
    x2.style.display = "none";                 //* hide old tab window
    var x1=document.getElementById(page_new);
    x1.style.display = "block";             //* make new tab window visible
    var x3=document.getElementById(new_tab);
    var x4=document.getElementById(old_tab);
    x4.style.height = "24px";                 //* decrease height to allow for border change
    x4.style.cursor = "pointer";                 //* make cursor into pointer when over old tab
    x3.style.height = "25px";                 //* increase height to allow for border change
    x3.style.cursor = "default";                 //* leave curosr default when over new tab
   };
</script>
<style type="text/css">
#tab_one {
    width:120px;
    height:25px;
    left:0px;
}
#tab_two {
    width:320px;
    height:24px;
    left:6px;
}
</style>
<style type="text/css">
.auto-style1 {
    font-size: 0.7em;
}
</style>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23929985-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body id="body">
<div id="container_border">
    <div id="container">
        <div id="header" style="margin-top:0px"> <img alt="Scales of Justice" src="http://www.lmjattorney.com/images/scales.gif" style="margin-right:35px; float:right; margin-top:-20px" height="273" width="274"  />
            <h2 style="text-align:center; font-family:'Times New Roman', Times, serif; margin-bottom:0px; font-size:18pt"> Law Office of <img alt="Lisa Malmer Johnson" src="http://www.lmjattorney.com/images/headerleft.gif" style="float:left; margin-left:80px; width: 300px; " height="58" /></h2>
            <h1 style="text-align:center;clear:left; font-family:'Times New Roman', Times, serif; font-size:24pt"> <span style="font-size:.6em">Appellate Advocacy<br />
                Post Conviction Relief<br />
                Criminal Defense <br />
                Habeas Corpus<br />
                Juvenile Law<br />
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<br />
                Quality Representation at affordable 
                rates</span></h1>
        </div>
        <div id="container_body">
            <div id="vertical_button_bar">
                <p style="border:4px double #CFAF89; margin-left:10px; margin-right:10px"> Select a practice or <br />
                    other area of interest </p>
                <ul id="nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="appeals.html">Civil and Criminal Appeals</a></li>
                    <li><a href="post_conviction.html">State Post Conviction Relief</a></li>
                    <li><a href="habeas_corpus.html">Federal Habeas Corpus</a></li>
                    <li><a href="criminal_defense.html">Criminal Defense</a></li>
                    <li><a href="juvenile.html">Juvenile Law </a></li>
                    <li><a href="about_IN_appellate.html">About Indiana Appellate Law</a></li>
                    <li><a href="resume.html">Resume</a></li>
                    <li><a href="contact.html">Contact Us </a></li>
                </ul>
            </div>
            <div id="container_right_column">
                <h2>Lisa Malmer Johnson <br />
                    JUVENILE LAW</h2>
                <p>In June of 2010, I formed an alliance with Attorney Randall L. Parr to work together on 
                    Juvenile Law, bringing together Mr. Parr's trial level experience with my extensive appellate 
                    advocacy experience. Our combined experience allows us to provide top notch representation 
                    during both the trial and appeal phases of representation. </p>
                <div id="tab_one" onclick="switch_tab('page_one')"> Juvenile Crime </div>
                <div id="tab_two" onclick="switch_tab('page_two')"> Department of Children's Services Actions </div>
                <div id="page_one">
                    <p>Juvenile Crimes</p>
                    <p>If you child has been arrested and charged with a 
                        crime, you and he or she should have been informed of your right 
                        to consult with one another about your rights to have an 
                        attorney present while being questioned, and about whether or 
                        not you wanted to waive those rights. In Indianapolis/Marion 
                        County you should have been presented with a waiver form. It is 
                        always in your best interest to have an attorney present when 
                        being questioned. </p>
                    <p>If you choose to talk to the police, you should know that 
                        they can tell you anything they want, true or not, in an 
                        effort to get you to confess to a crime, or to get you to 
                        make an incriminating statement. </p>
                    <p>The prosecution is required to turn over to the defense 
                        all of the information that they have about the crime, so 
                        that your attorney can prepare a proper defense. The 
                        attorney may want to do additional investigation and 
                        research (a public defender will not usually have the time 
                        or resources to purse additional investigation and 
                        research). </p>
                    <p>The criminal trial has two phases - the first is the 
                        trial hearing where the jury, or judge if it is a &quot;bench&quot; 
                        trial, decides guilt or innocence. The second phase is the 
                        sentencing hearing. Often times defense attorneys do not 
                        pursue the presentation of mitigating evidence that might 
                        reduce the individual&#39;s sentence. Traditionally this is not 
                        done except in very serious crimes. However, mitigating 
                        evidence can still be presented at any sentencing hearing, 
                        and good mitigation may reduce the&nbsp; individual&#39;s 
                        sentence significantly from what it might have bee without 
                        this evidence.</p>
                    <p>Mr Parr and I understand the unique problems and challenges 
                        of a juvenile prosecution, and the stress that you are under when 
                        you learn your child is in trouble. We will fight for your child's 
                        rights and do all we can to secure a favorable outcome in juvenile 
                        court.</p>
                </div>
                <div id="page_two">
                    <h3 style="font-size: 1.1em; font-weight: bold; text-align:center"> Child in Need of Services (CHINS) and <br />
                        Termination of 
                        Parental Rights (TPR)</h3>
                    <p>If you are facing the prospect of governmental 
                        interference in your relationship with your children through 
                        a CHINS or TPR action, you will need someone to fight for 
                        your rights and your children&#39;s rights. I understand how 
                        stressful and intimidating these cases can be. Between us, 
                        Mr. Parr and I have over three decades of experience 
                        handling CHINS and TPR cases at the trial and appellate 
                        levels.</p>
                    <p>If you are facing the prospect of governmental 
                        interference in your relationship with your children through 
                        a CHINS or TPR action, you will need someone to fight for 
                        your rights and your children&#39;s rights. I understand how 
                        stressful and intimidating these cases can be. Between us, 
                        Mr. Parr and I have over three decades of experience 
                        handling CHINS and TPR cases at the trial and appellate 
                        levels.</p>
                      </div>
            </div>
        </div>
        <div id="footer"> Law Office of Lisa Malmer Johnson - 317-852-7974 - <a href="mailto:LisaMJohnson@LMJAttorney.com">LisaMJohnson@LMJAttorney.com</a><br />
            <a href="mailto:AnneLJohnson@JohnsonLeflore.com"> <span style="font-size:.8em">Report site problems</span> </a><br />
        </div>
    </div>
</div>
<div id="jla">Website Design by <a href="http://www.jlaweb.com/">JLAWeb.com</a>
    <!-- Site Meter -->
    <script type="text/javascript" src="http://s50.sitemeter.com/js/counter.js?site=s50lmjattorney">

</script>
    <noscript>
    <a href="http://s50.sitemeter.com/stats.asp?site=s50lmjattorney" target="_top"> <img src="http://s50.sitemeter.com/meter.asp?site=s50lmjattorney" alt="Site Meter" border="0"/></a>
    </noscript>
    <!-- Copyright (c)2009 Site Meter -->
    </a> </div>
</body>
</html>


The styles are all in the head for example only but should be moved external of course.

Thanks Paul for your detailed help. I am aware that I know enough to be dangerous, but I have not been aware of just how true that is until I read through your post. I won’t have time to get into it in detail until Monday - have to take my girls to Girl Scout Camp tomorrow. I am self taught (which is probably obvious) - can you direct me to a book or website that will help me learn to better structure my CSS and html?

thanks for all of your help!

Anne