Keep getting white space while div is floated.

%3CLINGO-SUB%20id%3D%22lingo-sub-2978871%22%20slang%3D%22en-US%22%3EKeep%20getting%20white%20space%20while%20div%20is%20floated.%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2978871%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20in%20advance%20for%20reviewing%20my%20white%20space%20problem.%20I%20have%20a%20relatively%20simple%20asp.net%20site%20that%20has%20floating%20div's%20to%20store%20the%20tree%20view.%20The%20problem%20is%20the%20container%20div%20for%20the%20tree%20view%20and%20the%20other%20content%20div's%20keep%20showing%20up%20with%20white%20space%20before%20them.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENot%20sure%20what%20the%20problem%20is%20but%20suggestions%20are%20appreciated.%20I%20have%20enclosed%20the%20sample%20code%20and%20an%20image%20of%20the%20results%20while%20previewing%20the%20code.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%3CCONTENT%20id%3D%22Content2%22%20contentplaceholderid%3D%22ContentPlaceHolder1%22%20runat%3D%22Server%22%3E%0A%20%20%20%20%3CDIV%20style%3D%22float%3Aleft%3B%20background-color%3Alightslategray%3B%20width%3A200px%3B%20height%3A350px%22%3E%0A%20%20%20%20%20%20%20%20%3CTREEVIEW%20runat%3D%22server%22%20datasourceid%3D%22SiteMapDataSource1%22%3E%3C%2FTREEVIEW%3E%0A%0A%20%20%20%20%20%20%20%20%3CSITEMAPDATASOURCE%20id%3D%22SiteMapDataSource1%22%20runat%3D%22server%22%20startfromcurrentnode%3D%22True%22%3E%3C%2FSITEMAPDATASOURCE%3E%0A%0A%20%20%20%20%3C%2FDIV%3E%0A%20%20%20%20%3CDIV%3E%0A%20%20%20%20%20%20%20%20%3CH1%20id%3D%22toc-hId-1503732776%22%3EWeb%20Site%20Development%3C%2FH1%3E%0A%20%20%20%20%20%20%20%20%3CTABLE%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CTBODY%3E%3CTR%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CTD%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CH2%20id%3D%22toc-hId--2100673046%22%3EWeb%20Site%20Development%3C%2FH2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CP%3EThis%20is%20a%20paragraph%20on%20Web%20Site%20Development.%3C%2FP%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FTD%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CTD%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CH2%20id%3D%22toc-hId-386839787%22%3EMobile%20Web%20Site%20Development%3C%2FH2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CP%3EThis%20is%20a%20paragraph%20on%20Mobile%20Web%20Site%20Development.%3C%2FP%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FTD%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CTD%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CH2%20id%3D%22toc-hId--1420614676%22%3EWeb%20Applications%20and%20Portals%3C%2FH2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CP%3EThis%20is%20a%20paragraph%20on%20Web%20Application%20and%20Portals.%3C%2FP%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FTD%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FTR%3E%0A%20%20%20%20%20%20%20%20%3C%2FTBODY%3E%3C%2FTABLE%3E%0A%0A%20%20%20%20%3C%2FDIV%3E%0A%3C%2FCONTENT%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22screenshot%20UPDATED%20asp.net%20white%20space.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F327873i63245D8209C27C2A%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22screenshot%20UPDATED%20asp.net%20white%20space.png%22%20alt%3D%22screenshot%20UPDATED%20asp.net%20white%20space.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20basically%20when%20I%20have%20the%20two%20div's%3A%20one%20floating%20with%20tree%20view%2C%20and%20the%20other%20storing%20content%20(headings%2C%20page%20content...)%2C%20what%20happens%20is%20there%20is%20a%20large%20white%20space%20section%20at%20the%20top%20of%20the%20page%20between%20master%20page%20navigation%20content%20and%20the%20page%20tree%20view%20and%20page%20content.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20would%20be%20appreciated%20if%20someone%20could%20figure%20out%20a%20way%20to%20get%20rid%20of%20all%20that%20whitespace%20towards%20the%20top%20of%20the%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2978871%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EASP.NET%20(Classic)%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Occasional Contributor

Hello,

 

Thanks in advance for reviewing my white space problem. I have a relatively simple asp.net site that has floating div's to store the tree view. The problem is the container div for the tree view and the other content div's keep showing up with white space before them.

 

Not sure what the problem is but suggestions are appreciated. I have enclosed the sample code and an image of the results while previewing the code.

 

 

 

 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div style="float:left; background-color:lightslategray; width:200px; height:350px">
        <asp:TreeView runat="server" DataSourceID="SiteMapDataSource1"></asp:TreeView>

        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" StartFromCurrentNode="True" />

    </div>
    <div>
        <h1>Web Site Development</h1>
        <table>
            <tr>
                <td>
                    <h2>Web Site Development</h2>
                    <p>This is a paragraph on Web Site Development.</p>
                </td>
                <td>
                    <h2>Mobile Web Site Development</h2>
                    <p>This is a paragraph on Mobile Web Site Development.</p>
                </td>
                <td>
                    <h2>Web Applications and Portals</h2>
                    <p>This is a paragraph on Web Application and Portals.</p>
                </td>
            </tr>
        </table>

    </div>
</asp:Content>

 

 

 

 

screenshot UPDATED asp.net white space (1).png

 

So basically when I have the two div's: one floating with tree view, and the other storing content (headings, page content...), what happens is there is a large white space section at the top of the page between master page navigation content and the page tree view and page content.

 

It would be appreciated if someone could figure out a way to get rid of all that whitespace towards the top of the page.

 

Thank you.

2 Replies

@AlphaCr8tive 

 

Bump... Anyone out there?

You have to review the rendered html source code (With Google Chrome browser, press F12, select tab Elements).

1/ Is there anything unintentionally inserted between your two divs?
2/ Review CSS attributes (Padding, Margin). Many elements have a default padding, margin greater than 0.