DIV Tag and positioning, DIV Tag and positioning |
DIV Tag and positioning, DIV Tag and positioning |
Muru4000 |
Nov 1 2017, 08:30 AM
Post
#1
|
Group: Members Posts: 3 Joined: 1-November 17 Member No.: 26,524 |
Hi Forum member
I have the HTML and CSS as given below. I expect the <P> tags will display below "Mathpuzzle"... But its displaying between Matchpuzzle and right hand side <A>s. Any help will be highly appreciated. Also attached the same. HTML: <!DOCTYPE html> <html > <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>CIDINFOTECH</title> <link rel="stylesheet" href="layout.css" type="text/css" /> </head> <body> <div class="rows"> <div class="left"> <h1> <a href="Mathpuzzle.html" > Math Puzzle</a> </h1> </div> <div class="right"> <ul> <li><a href="mathpuzzle.html"> Home </a> </li> <li><a href="pta.html">PTA</a> </li> <li><a href="contact1.html">Contact Us</a> </li> </ul> </div> </div> <div class="rows"> <div class="left" > <p > Test </p> <p > Test </p> </div> <div class="right" > <p > Test </p> <p > Test </p> </div> </div> </body> </html> CSS: body { margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#979797; background-color:#06213F; } .rows{ position:relative; margin:0 auto 20px; width:960px; text-align:left; } .left{ float:left; } .right{ float:right; } li{ display:inline; margin:0 4px 0 0; padding:0 6px 0 0; /* border-right:1px solid #FCFCFC; */ } Attached File(s) Mathpuzzle.html ( 745bytes ) Number of downloads: 680 layout.css ( 433bytes ) Number of downloads: 713 |
Christian J |
Nov 1 2017, 10:35 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
Muru4000 |
Nov 2 2017, 12:51 PM
Post
#3
|
Group: Members Posts: 3 Joined: 1-November 17 Member No.: 26,524 |
I expect the <P> tags will display below "Mathpuzzle"... But its displaying between Matchpuzzle and right hand side <A>s. The HTML elements with CLASS "left" or "right" are floated in the CSS, which gives just the result you describe. Thank You Christian J, Possible... Please suggest me corrections to the code that would give me the desired result ie, both <P> tags appearing below Matchpuzzle . |
Christian J |
Nov 2 2017, 02:11 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
the desired result ie, both <P> tags appearing below Matchpuzzle . You mean you want four sections, something like this: CODE Mathpuzzle Home PTA Contact us Test Test Test Test ? If so you might clear the float with e.g. CODE .rows {clear: both;} If that's not what you want, please explain in more detail. |
Muru4000 |
Nov 3 2017, 11:20 AM
Post
#5
|
Group: Members Posts: 3 Joined: 1-November 17 Member No.: 26,524 |
the desired result ie, both <P> tags appearing below Matchpuzzle . You mean you want four sections, something like this: CODE Mathpuzzle Home PTA Contact us Test Test Test Test ? If so you might clear the float with e.g. CODE .rows {clear: both;} If that's not what you want, please explain in more detail. Dear Chiristian yes your suggestion had solved my problem.Thanks for your support. |
Lo-Fi Version | Time is now: 25th April 2024 - 12:20 PM |