Jump to content

Relative Positioning from Noobie


nyuille

Recommended Posts

Hello

 

 

I have following document flow:

 

<h3> ... </h3>

<p> ....</p>

 

<div1>

<div2>...</div2>

<div1>

 

<h2>...</h2>

 

 

Here is my problem. I am just learning about positioning and as I understand it, you should you let parents be relative and child be absolute if needed so website renders smoothly in all browsers.

 

I made div2 elements absolute, but div1 as relative. I thought this would allow for natural document flow as planned above. However, what's happening is that h2 is appearing above div1.

 

Can anyone help me so that h2 appears below div1?

 

Thanks,

Natalie

<h3>

Link to comment
Share on other sites

Don't use positioning for layout. When you use absolute positioning, the element is no longer taken into account when calculating the height of the document. div1 has no height at all if the only thing inside it is div2.

 

<div1> and <div2> are not valid HTML elements, I hope that in your real document they're just called <div>.

Link to comment
Share on other sites

Well, it would help if you corrected your syntax...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
#rel{
position:relative;
width:50%;
height:200px;
border:1px solid blue;
overflow:hidden;
}
#abs{
position:absolute;
height:50px;
top:20px;
left:50px;
background-color:red;
overflow:hidden;
}
</style>
</head>

<body>

<h2>This is h2 title</h2> 

<p>This is a paragraph</p>

<div id="rel"> 

 <div id="abs">this is absolutely positioned inside a relative block</div>

</div>

<h3>This is h3 near bottom</h3>

</body>
</html>

You are correct that absolute positioning should ONLY be used inside relative positioning. PLUS it should ONLY be used when necessary, such as when you really need to position something on top of something else.

Link to comment
Share on other sites

Hi all -

 

Thanks for feedback.

 

This seems like an easy layout to achieve, but I having trouble.

 

I have grouped each image with its link and content through <div class=box1, box 2, box 3, box4, box5,etc>, but I can't layout the 5 boxes like they have it here - 2 on first row and 3 on second row.

 

If you click on site, the area I am trying to recreate is 5 images under "We Are Mountain Village".

 

https://townofmountainvillage.com/

 

I am trying something like this -

 

CSS sheet

 

.box1,.box2 {
display: inline;
float: left
clear: right;
}
.box3,.box4,.box5{
display: inline;
float: left;
clear: right;
}
The content under these boxes is coming up the right side of page even though I say clear: right;
Please help.
Regards,
Natalie
Edited by nyuille
Link to comment
Share on other sites

OK, I see. Thanks for your knowledge.

 

Is there a way then to achieve the 2 rows with 2 boxes in first row and 3 boxes on second row.

I have the grouping of img, text, and link achieved through divs already.

 

Its just the overall layout that I am struggling with.

 

Thanks.

Link to comment
Share on other sites

Float all the boxes to the left. On the third box, clear left.

 

If you want proper alignment, you can set the widths of the first two boxes to 50% and the widths of the following 3 boxes to 33.33%.

 

If you want spacing between those boxes you'll have to do some calculations so that the sum of widths and margins add up to 100%.

  • Like 1
Link to comment
Share on other sites

You are using to many classes, that give identical style. You can reference the parent class or classes to apply styling children as there cascade down.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <style type="text/css">

            .row_wrap {background-color: red;}


            .row  img {width: 100%; height: auto; float: left;}
            .row > div  > p, .row > div > div {padding: 0 15px; }
            .row  p {background-color: orange;}
            .row  p a {background-color: yellow; display: block;}
            .row > div > div p {background-color: green; }
            .row {overflow: hidden;}
            .row.two_col {}
            .row > div {float: left;}
            .two_col > div {width:50%;}

            .row.three_col {}
            .three_col > div {width:33.33%;}

        </style>
    </head>
    <body>
        <div class="row_wrap">
            <div class="row two_col">

                <div>
                    <p>  <img alt="" src="http://www.w3schools.com/w3css/img_fjords.jpg" />
                    </p>
                    <p> <a href="Residents.html">RESIDENTS</a>
                    </p>
                    <div>
                        <p>
                            text
                        </p>
                    </div>
                </div>

                <div>
                    <p>
                        <img alt="" src="http://www.w3schools.com/w3css/img_lights.jpg" />
                    </p>
                    <p><a  href="Businesses.html">BUSINESSES</a>
                    </p>
                    <div>
                        <p>
                            text
                        </p>
                    </div>
                </div>
            </div>

            <div class="row three_col">

                <div>
                    <p>
                        <img alt="" src="http://www.w3schools.com/w3css/img_mountains.jpg" />
                    </p>
                    <p><a  href="Businesses.html">GOVERNING</a>
                    </p>
                    <div>
                        <p>
                            text
                        </p>
                    </div>
                </div>

                <div>
                    <p>
                        <img alt="" src="http://www.w3schools.com/w3css/img_forest.jpg" />
                    </p>
                    <p><a href="Businesses.html">RECREATING</a>
                    </p>
                    <div>
                        <p>
                            text
                        </p>
                    </div>
                </div>

                <div>
                    <p>
                        <img alt="" src="http://www.w3schools.com/w3css/img_fjords.jpg" />
                    </p>
                    <p>
                        <a href="Businesses.html">GETTING AROUND</a>
                    </p>
                    <div>
                        <p>
                            text
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...