Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ DIV Tag and positioning

Posted by: Muru4000 Nov 1 2017, 08:30 AM

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)
Attached File  Mathpuzzle.html ( 745bytes ) Number of downloads: 373
Attached File  layout.css ( 433bytes ) Number of downloads: 424

Posted by: Christian J Nov 1 2017, 10:35 AM

QUOTE(Muru4000 @ Nov 1 2017, 02:30 PM) *

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.

Posted by: Muru4000 Nov 2 2017, 12:51 PM

QUOTE(Christian J @ Nov 1 2017, 10:35 AM) *

QUOTE(Muru4000 @ Nov 1 2017, 02:30 PM) *

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 .

Posted by: Christian J Nov 2 2017, 02:11 PM

QUOTE(Muru4000 @ Nov 2 2017, 06:51 PM) *

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.

Posted by: Muru4000 Nov 3 2017, 11:20 AM

QUOTE(Christian J @ Nov 2 2017, 02:11 PM) *

QUOTE(Muru4000 @ Nov 2 2017, 06:51 PM) *

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.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)