www.webdeveloper.com
Results 1 to 5 of 5

Thread: main <DIV> tag . Size width=900px

  1. #1
    Join Date
    Nov 2004
    Location
    xxxyyy
    Posts
    357

    main <DIV> tag . Size width=900px

    I have a main <DIV> tag . Size width=900px , height=650px.

    But to my surprise , This main <DIV> tag not spreading the entire browser space equally.

    I had a right content <div> tag under the the main <DIV> tag ...i have assigned CSS float : right for this right content <div> tag ....it still stays in the middle ....its not spreading to the browsers extreme right ...how to fix this ?

  2. #2
    Join Date
    Nov 2004
    Location
    xxxyyy
    Posts
    357
    any CSS expert ?

  3. #3
    Join Date
    Aug 2006
    Posts
    1,943
    You'll want to show the actual page that you're working on. It's not clear (to me, at least) what the error might be from what you say above.

    Dave

  4. #4
    Join Date
    Nov 2004
    Location
    xxxyyy
    Posts
    357
    the page is quite big to post.

    So, Can you please tell what CSS to write for main <DIV> tag with width=900px , height=650px so that it touches the browser completely ?


    and what CSS you write for an inner <DIV> which is to be right aligned to the browser but inside this main <DIV> tag ?


    Let me know the CSS ...I'll test with them in my set up .

    Thanks

  5. #5
    Join Date
    Aug 2006
    Posts
    1,943
    Well, keep in mind that "width 900, height 650" is not consistent with "touches the browser completely" of course, since everybody's browser may be a different size. Perhaps yours happens to be 900 by 650. But in any event, something like this should get you rolling:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    <head>
    	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    	<title>test</title>
    	<style type="text/css">
    	* {margin:0;padding:0}
    	#wrap {width:900px;height:650px;background-color:#CCC}
    	#sect {width:200px;height:650px;float:right;background-color:#CCF}
    	</style>
    </head>
    
    <body>
    	<div id="wrap">
    		<div id="sect">
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus turpis, imperdiet interdum fringilla ut, tincidunt eu sem. Nullam nec nulla eu ante rutrum accumsan. Morbi tellus urna, tempor et egestas sit amet, condimentum sit amet lorem. Sed at sem mauris, eu accumsan orci. Duis in ultrices leo. Phasellus a massa a orci convallis posuere. Fusce ullamcorper ultricies nisi, a faucibus justo dictum vel. Fusce et lorem orci, vel mollis lacus. Sed interdum, mi at bibendum commodo, libero ante venenatis tortor, eget cursus sapien est ut dui. Etiam turpis lacus, mattis eu vestibulum in, aliquet vel orci. Donec augue tellus, consequat vel dignissim et, congue at risus. Integer nec eros sit amet quam suscipit laoreet. Vestibulum sed tortor orci. Cras molestie semper diam molestie auctor. Phasellus id laoreet nunc. Aliquam lorem leo, viverra at vulputate nec, imperdiet quis mi.</p>
    		</div>
    	<p>Duis quis justo lorem. Quisque sagittis felis non ipsum rutrum pharetra. Donec purus mi, vehicula eget porta eu, aliquet et est. Integer laoreet orci sit amet risus elementum blandit. Suspendisse venenatis eros et diam vulputate sit amet eleifend sapien vulputate. Fusce ac sapien sed velit tempor fermentum. Integer lacinia, dolor vel faucibus iaculis, tortor ante tristique ipsum, quis suscipit erat orci molestie arcu. Aliquam cursus, diam placerat suscipit pharetra, tortor lacus congue nisi, quis consequat elit nunc in sem. Etiam lobortis eros eu justo feugiat vestibulum. Maecenas hendrerit eros leo. Suspendisse blandit convallis tellus. Etiam a luctus sem. Phasellus varius adipiscing lorem, vel accumsan libero varius id. Mauris varius mauris ac orci aliquam egestas. Nullam euismod erat nec diam faucibus commodo. Integer ac eros vitae augue blandit scelerisque. Aliquam erat diam, egestas a ullamcorper nec, condimentum commodo arcu.</p>
    	<p>Ut neque tellus, dapibus a accumsan quis, pellentesque non nibh. Pellentesque porttitor vehicula risus, a scelerisque sapien commodo nec. Morbi gravida posuere est sit amet tempus. Nullam pharetra ultrices nisl sit amet tincidunt. Fusce auctor auctor nibh et sagittis. Donec rutrum magna et ligula cursus quis malesuada erat commodo. Aliquam tristique eleifend diam eget varius. Suspendisse eget justo ut arcu convallis imperdiet quis id elit. Proin vel velit ut lorem iaculis condimentum. Sed suscipit placerat hendrerit. Ut nec magna nulla, ac lobortis ipsum. Cras adipiscing sollicitudin erat, at tincidunt ligula feugiat ut. Cras ut aliquam diam. Aenean ut ante erat, non lobortis dui.</p> 
    	</div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles