The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> DIV Tag and positioning, DIV Tag and positioning
Muru4000
post 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)
Attached File  Mathpuzzle.html ( 745bytes ) Number of downloads: 33
Attached File  layout.css ( 433bytes ) Number of downloads: 30
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 1 2017, 10:35 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,730
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Muru4000
post Nov 2 2017, 12:51 PM
Post #3





Group: Members
Posts: 3
Joined: 1-November 17
Member No.: 26,524



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 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 2 2017, 02:11 PM
Post #4


.
********

Group: WDG Moderators
Posts: 7,730
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Muru4000
post Nov 3 2017, 11:20 AM
Post #5





Group: Members
Posts: 3
Joined: 1-November 17
Member No.: 26,524



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st November 2017 - 06:06 PM