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; */
}
Full Version: DIV Tag and positioning
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.
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 .
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.
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.