Help - Search - Members - Calendar
Full Version: DIV Tag and positioning
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
Muru4000
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; */

}
Christian J
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.
Muru4000
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 .
Christian J
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.
Muru4000
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.
Invision Power Board © 2001-2019 Invision Power Services, Inc.