Adjust the height of div

Page 1 of 1

12 Replies - 565 Views - Last Post: 07 July 2012 - 02:08 AM

#1 unknownmaster80  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 06-August 11

Adjust the height of div

Posted 05 July 2012 - 11:49 PM

Hi, I am new to css and i need a big help here.

This is the result I want.
Attached Image

But this is the result i ended up getting when running my website.
Attached Image

This is my css
#body{
	width:100%;
	padding-bottom:40px;
}
#main{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);    
    background-color:BlanchedAlmond;
}

#content{
	float:right;
	width:650px;
	height:85%;
	padding:30px 25px 10px 10px;
	font-size:medium;
}
 .breadcrumb {
    padding:20px 10px 0 0;   
    height:21px;
    font-size:x-small;
	width:690px;
	position:relative;
	left:20px;
}


The #body is in my master page and the rest is in nestedmaster page
So is it possible to adjust the height(meaning not fixed height). Where different .aspx pages will have different heights.

Thanks

This post has been edited by unknownmaster80: 05 July 2012 - 11:51 PM
Reason for edit:: please use [code] [/code] tags when posting code


Is This A Good Question/Topic? 0
  • +

Replies To: Adjust the height of div

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,689
  • Joined: 08-June 10

Re: Adjust the height of div

Posted 05 July 2012 - 11:55 PM

the problem is the float on the content. since it does not count for the height calculation of its container, that will collapse if there is no unfloated content.

either you don’t use float for the content or you insert an element that is placed after the floated content (using clear: both;)
Was This Post Helpful? 0
  • +
  • -

#3 unknownmaster80  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 06-August 11

Re: Adjust the height of div

Posted 06 July 2012 - 12:04 AM

I get what you say but where should I add the <div class="clear"></div> in the div?

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="main">
    <div class="breadcrumb">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <div id="content" style="width: 94%; height:87%; top: 0px; margin-left: 10px;" >
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">            
        </asp:ContentPlaceHolder>
    </div>
    <div class="back_to_top" style="bottom:5%"><a href="#">back to top</a></div>
</div>
</asp:Content>


I used this css btw..
.clear {
    clear:both;
}

I tried but it is still not working..

This post has been edited by unknownmaster80: 06 July 2012 - 12:06 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,689
  • Joined: 08-June 10

Re: Adjust the height of div

Posted 06 July 2012 - 12:06 AM

could you paste the HTML code as received by the browser (makes it a lot easier to answer an HTML question)?

I guess it should be fine if you add the clear class to the back_to_top classed <div>

This post has been edited by Dormilich: 06 July 2012 - 12:07 AM

Was This Post Helpful? 0
  • +
  • -

#5 unknownmaster80  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 06-August 11

Re: Adjust the height of div

Posted 06 July 2012 - 12:08 AM

You mean this?

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%"><head id="ctl00_ctl00_ctl00_Head1"><title>
	 Home Furniture. 
</title><link href="/Styles/style.css" rel="stylesheet" type="text/css"><link href="/Styles/style1.css" rel="stylesheet" type="text/css">
    <!-- main menu -->

    <script src="/Scripts/jqueryslidemenu.js" type="text/javascript"></script>
    <!-- /main menu -->
    <!-- slideshow -->
    <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
    <script src="/Scripts/responsiveslides.js" type="text/javascript"></script>
    <script src="/Scripts/responsiveslides.min.js" type="text/javascript"></script>
    <link href="/Styles/responsiveslides.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
        $(function () {
            $(".rslides").responsiveSlides({
                auto: true,
                timeout: 4000,
                pager: true, //go to page 1, 2 or 3 
                nav: true, // previous and next button
                speed: 1000,
                maxwidth: 800,
                pause: true
            });
        });
        
    </script>
    <!-- /slideshow -->
</head>
<body style="height:100%">
<form name="aspnetForm" method="post" action="ChangeContact.aspx" onsubmit="javascript:return WebForm_onsubmit();" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJODM1MjMxMTUwD2QWAmYPZBYCZg9kFgJmD2QWAgIDD2QWBgIDD2QWCAIBDw8WAh4HVmlzaWJsZWdkZAIDDw8WBB4LTmF2aWdhdGVVcmwFD34vQ3VzdEluZm8uYXNweB4EVGV4dAUGTW9uaWNhZGQCBQ8PFgQfAgUGTG9nb3V0HhBDYXVzZXNWYWxpZGF0aW9uaGRkAgcPDxYCHwIFDjBpdGVtcyBpbiBjYXJ0ZGQCBQ9kFgoCAQ8PFgQfAQUPfi9DdXN0SW5mby5hc3B4HwBnZGQCAw8PFgQfAQUPfi9Qcm9kdWN0cy5hc3B4HwIFB1Byb2R1Y3RkZAIFDw8WBB8BBQ1+L0V2ZW50cy5hc3B4HwIFBkV2ZW50c2RkAgcPDxYEHwEFEH4vQ29udGFjdFVzLmFzcHgfAgUKQ29udGFjdCBVc2RkAgkPDxYEHwIFB1Jld2FyZHMfAQUNfi9SZXdhcmQuYXNweGRkAgcPZBYCAgEPZBYCAgMPZBYCAgMPPCsADwEADxYEHgtfIURhdGFCb3VuZGceC18hSXRlbUNvdW50AgFkFgJmD2QWBmYPDxYCHwBoZGQCAQ9kFgJmDw8WAh8CBQg5MDk0MzkwM2RkAgIPDxYCHwBoZGQYAgUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFHmN0bDAwJGN0bDAwJGN0bDAwJEltYWdlQnV0dG9uMQUfY3RsMDAkY3RsMDAkY3RsMDAkZWRNZW51JGJ0bkltZwVPY3RsMDAkY3RsMDAkY3RsMDAkTWFpbkNvbnRlbnQkQ29udGVudFBsYWNlSG9sZGVyMSRDb250ZW50UGxhY2VIb2xkZXIxJGR2Q29udGFjdA8UKwAHZGRkZGQWAAIBZNhW7qBsqsUvcDe1QvDTCNSEqwKh">
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=r7Oc-8WqsvJR1DbmoVOPY5oHy2s29Fb9VPeJfIE2uObnY3igestaTcYD7_krzHOND3KD9TYtB6o0iKoiNO59DoGaWaY1&amp;t=634604713351482412" type="text/javascript"></script>


<script src="/WebResource.axd?d=sgqWkVllutHexA66A_F3s__LgD6HIlMcDv1o4YBZWEASBFKOMX6H3XoH4lUnY2jCXUX3V1Rlx7_gGiByZJbrrFkoO6M1&amp;t=634604713351482412" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_onsubmit() {
if (typeof(Validatoronsubmit) == "function" && Validatoronsubmit() == false) return false;
return true;
}
//]]>
</script>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwLwu6SWDgLXi6nUCgK60P2vDwKsoJnVDQKywZDdBALj24uwAgLPiJOeCwIrw0bev1zHYsc3L0aNbC0CQmqM">
</div>
<!-- wrapper -->
<div class="wrapper">
	<!-- header -->
	<div id="header">
		<!-- header_logo -->
		<div id="header_logo">
            <input type="image" name="ctl00$ctl00$ctl00$ImageButton1" id="ctl00_ctl00_ctl00_ImageButton1" src="/Images/logo.gif" style="border-width:0px;">
            
        </div>
		<!-- /header_logo -->
		<!-- menu -->
		<div id="menu">
			<!-- header_login -->
			<div id="header_login">
                
    <span id="ctl00_ctl00_ctl00_edHeader_lblWelcome">Welcome, </span>
    <a id="ctl00_ctl00_ctl00_edHeader_HyperLink5" href="CustInfo.aspx">Monica</a> &nbsp;| 
    <a onclick="lblClick;" id="ctl00_ctl00_ctl00_edHeader_LinkButton1" class="LinkButtonM" href="javascript:__doPostBack('ctl00$ctl00$ctl00$edHeader$LinkButton1','')">Logout</a><br>
    <div class="small fright clearb">
        <a id="ctl00_ctl00_ctl00_edHeader_hlItem" href="ShoppingCart.aspx">0items in cart</a>
    </div>

            </div>
			<!-- /header_login -->
			<!-- mainmenu -->
			<div id="mainmenu">
			    
    <ul>
        <li><a id="ctl00_ctl00_ctl00_edMenu_AccLink" href="CustInfo.aspx">Account</a></li>
        <li><a id="ctl00_ctl00_ctl00_edMenu_HyperLink1" href="Products.aspx">Product</a></li>
        <li><a id="ctl00_ctl00_ctl00_edMenu_HyperLink2" href="Events.aspx">Events</a></li>
        <li><a id="ctl00_ctl00_ctl00_edMenu_HyperLink3" href="ContactUs.aspx">Contact Us</a></li>
        <li><a id="ctl00_ctl00_ctl00_edMenu_HyperLink4" href="Reward.aspx" style="display:inline-block;width:87px;">Rewards</a>
        </li>
        <li class="search_box">
            <input name="ctl00$ctl00$ctl00$edMenu$txtSearch" type="text" id="ctl00_ctl00_ctl00_edMenu_txtSearch" style="width:99px;margin-left: 0px; vertical-align:top">
            <input type="image" name="ctl00$ctl00$ctl00$edMenu$btnImg" id="ctl00_ctl00_ctl00_edMenu_btnImg" src="Images/search.jpg" style="border-width:0px;border: 0; background: transparent; height:20px">
        </li>
    </ul>

			</div>
            <!-- /mainmenu -->
		</div>
        <!-- /menu -->
	</div>
    <!-- /header -->
    <div id="body">
        
    
    <div id="main">
    <div class="breadcrumb">
        
    <p>
</p>

    </div>
    <div id="content" style="width: 94%; height:87%; top: 0px; margin-left: 10px;">
        
    <div id="content_title">
        Change Contact</div>
    <div id="ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_ValidationSummary1" style="color:Red;display:none;">

</div>
    <br>
    <div class="form_left">
        Current Contact:</div>
    <div class="form_right">
        <div>
	<table cellspacing="0" align="Left" border="0" id="ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_dvContact" style="height:19px;width:620px;border-collapse:collapse;">
		<tbody><tr>
			<td colspan="2">90943903</td>
		</tr>
	</tbody></table>
</div>
    </div>
    <div class="form_left">
        New Contact:</div>
    <div class="form_right">
        <input name="ctl00$ctl00$ctl00$MainContent$ContentPlaceHolder1$ContentPlaceHolder1$txtContact" type="text" maxlength="20" id="ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_txtContact">
        <span id="ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_rfvContact" style="color:Red;visibility:hidden;">*</span>
    </div>
    <div class="form_left"></div>
    <div class="form_right">
        <input type="submit" name="ctl00$ctl00$ctl00$MainContent$ContentPlaceHolder1$ContentPlaceHolder1$btnSubmit" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl00$ctl00$MainContent$ContentPlaceHolder1$ContentPlaceHolder1$btnSubmit&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_btnSubmit">
    </div>
    

    </div>
    <div class="back_to_top" style="bottom:5%"><a href="#">back to top</a></div>
</div>
<div class="clear"></div>


    </div>
</div>
<!-- /wrapper -->
<!-- footer_wrapper -->
<div id="footer_wrapper">
	<!-- footer_block -->
	<div id="footer_block" class="center">
			<!-- footer_sidebar -->
	<div id="footer_sidebar">
		<!-- footer_sidebar_widgets -->
		<div class="footer_sidebar_widgets">
			<ul>	
				<li>
					<h2 class="widgettitle">Company Information</h2>
					<ul>
						<li><a href="#" title="About Us">About Us</a></li>
                        <li><a href="#" title="Store Locator">Store Locator</a></li>
					</ul>
				</li>			
				
			</ul>
		</div>
		<!-- /footer_sidebar_widgets -->
		<!-- footer_sidebar_widgets -->
		<div class="footer_sidebar_widgets">
			<ul>
				<li>
					<h2 class="widgettitle">Customer Service</h2>
					<ul>
                        <li><a href="#" title="About Us">Contact Us</a></li>
                        <li><a href="#" title="Privacy and Terms of Use">Privacy and Terms of Use</a></li>
                        <li><a href="#" title="Furniture Warranty">Furniture Warranty</a></li>
                        <li><a href="#" title="Delivery">Delivery</a></li>
    				</ul>
				</li>						
			</ul>
		</div>
		<!-- /footer_sidebar_widgets -->
        <!-- footer_sidebar_widgets -->
		<div class="footer_sidebar_widgets">
			<ul>			
				<li>
					<h2 class="widgettitle">Others</h2>
					<ul>
                        <li><a href="#" title="Promotions">Promotions</a></li>
                        <li><a href="#" title="Events">Events</a></li>
                        <li><a href="#" title="Events">Rewards</a></li>
                        <li><a href="#" title="About Us">Site Map</a></li>
    				</ul>
				</li>						
			</ul>
		</div>
		<!-- /footer_sidebar_widgets -->
	</div>
	<!-- /footer_sidebar -->
	</div>
	<!-- /footer_block -->
	<!-- footer -->
	<div id="footer" class="center">
		<ul class="center">
            <li><a href="http://demo.templateworld.com/wordpress-theme/">Home</a></li>
			<li><a href="http://demo.templateworld.com/wordpress-theme/">About</a></li>
            <li><a href="http://demo.templateworld.com/wordpress-theme/links/" title="Links">Search</a></li>
			<li><a href="http://demo.templateworld.com/wordpress-theme/about-2/" title="About">Account</a></li>
            <li><a href="http://demo.templateworld.com/wordpress-theme/archives/" title="Archives">Site Map</a></li>
            <li><a href="http://demo.templateworld.com/wordpress-theme/contact/" title="Contact">Contact</a></li>
		</ul>
		<p class="copyrights" style="text-align: center">Copyright © 2012 Industries, Inc. All Rights Reserved. <br>
        ResponsiveSlides.js created by: <a href="http://www.responsive-slides.viljamis.com">@viljamis</a><br>
        Powered by: <a href="http://www.templateworld.com">TemplateWorld</a><br>
	</p><br>
	</div>
	<!-- /footer -->
</div>
<!-- /footer_wrapper -->    

<script type="text/javascript">
//<![CDATA[
var Page_ValidationSummaries =  new Array(document.getElementById("ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_ValidationSummary1"));
var Page_Validators =  new Array(document.getElementById("ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_rfvContact"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_rfvContact = document.all ? document.all["ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_rfvContact"] : document.getElementById("ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_rfvContact");
ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_rfvContact.controltovalidate = "ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_txtContact";
ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_rfvContact.errormessage = "Please enter a contact";
ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_rfvContact.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ctl00_ctl00_ctl00_MainContent_ContentPlaceHolder1_ContentPlaceHolder1_rfvContact.initialvalue = "";
//]]>
</script>


<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(Validatoronload) == "function") {
    Validatoronload();
}

function Validatoronsubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommononsubmit();
    }
    else {
        return true;
    }
}
        //]]>
</script>
</form>


</body></html>

This post has been edited by unknownmaster80: 06 July 2012 - 12:26 AM

Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,689
  • Joined: 08-June 10

Re: Adjust the height of div

Posted 06 July 2012 - 12:11 AM

that code, yes.

you need to put the clearing element inside the container (as I said, apply the class to above said element)
Was This Post Helpful? 0
  • +
  • -

#7 unknownmaster80  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 06-August 11

Re: Adjust the height of div

Posted 06 July 2012 - 12:14 AM

Oh. I realised I didn't show you my back to top

.back_to_top {
    float:right;
    clear:both;
    font-size:small;
    width:100px;
    position:relative;
    bottom:3%;
}

It looks like this. But it still did not work.

This post has been edited by unknownmaster80: 06 July 2012 - 12:14 AM

Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,689
  • Joined: 08-June 10

Re: Adjust the height of div

Posted 06 July 2012 - 01:06 AM

yeah, then the clear div has to be the last one in the container.
Was This Post Helpful? 1
  • +
  • -

#9 unknownmaster80  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 06-August 11

Re: Adjust the height of div

Posted 06 July 2012 - 02:09 AM

It works! Thanks. Sorry for the late reply anyways 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="main">
    <div class="breadcrumb">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    <div id="content" style="width: 94%; height:87%; top: 0px; margin-left: 10px;" >
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">            
        </asp:ContentPlaceHolder>
    </div>
    <div class="back_to_top" style="bottom:5%"><a href="#">back to top</a></div>
    /*Add Clear class here*/
    <div class="clear"></div>
    /*Add Clear class here*/
</div>

Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,689
  • Joined: 08-June 10

Re: Adjust the height of div

Posted 06 July 2012 - 04:12 AM

um, do you need to use the float at all? I don’t see any immediate need of it.
Was This Post Helpful? 0
  • +
  • -

#11 unknownmaster80  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 06-August 11

Re: Adjust the height of div

Posted 06 July 2012 - 08:50 AM

Meaning?
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2935
  • View blog
  • Posts: 7,689
  • Joined: 08-June 10

Re: Adjust the height of div

Posted 06 July 2012 - 03:33 PM

why do you use float at all?
Was This Post Helpful? 0
  • +
  • -

#13 unknownmaster80  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 06-August 11

Re: Adjust the height of div

Posted 07 July 2012 - 02:08 AM

I was thinking if you were asking why the content page float: right?
Cause it is for my another masterpage that looks like this.

Attached Image

I was trying to do a shorter way. Cause even if there is no #sidebar_tabs_links it would not affect my result. Or I should not do it this way?
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1