css layout help

[rouse]

In working with a page for a website, I don’t understand two behaviors of the CSS HTML script. The site is located at http://rouse.ws/abcwiresales/index.html
In the middle of the page I want to have two <div> s that I call picture box left and picture box right next to each other. One on the left and the other on the right.
In the display the two <div>s are stacked vertically which is one of the problems and the second issue is that I see red marks that I don’t recognize in the script. I wanted to see the boundaries of the two divisions.

I would appreciate help in resolving these issues.

Thanks!
WBR

[radhakrishna.p]

hai rouse

i am confused about one thing as shown bellow

In the display the two <div>s are stacked vertically which is one of the problems

could you explain me clearly about the requirement?

and in the second thing,

you have seen some red marks right

its border style which applied by css class for your two divs called pictureBoxRight,pictureBoxleft

go in your css and find for the classes of both divs (bellow is what you are given in your css):

pictureBoxRight {
    display: block;
    width: 500px;
    height: 475px;
    border: 1px solid red;   // this css property makes that red borders around divs on your page
    padding: 0.2em;
    float: right;
}
pictureBoxLeft {
    display: block;
    width: 450px;
    height: 475px;
    border: 1px solid red; // this css property makes that red borders around divs on your page
    padding: 0.2em;
    float: left;
}

if you want to change that then try to change the border property as follows

border: 1px solid red(or) blue (or) black; // whatever color you want here 

(or)

border:none; // set this, if want no borders around divs

let me know the status

happy coding

**any comments are appreciated on my clarification **

[reihaan]

Radha provided good css, While use of same widths is the best option.

[rouse]

Thanks for your assistance. Things are getting better with this display after following most of your advice and suggestions. I am now down to two problems that I can’t explain or know how to solve.

The first is why does the word “Galvanized” exceed the boundariesof the container box. I would expect itto wrap around and be on the next line.

The second is at the bottom of the page that starts with “CallABC Wire Sales…”

I would like this to be an unordered list in the traditionalfashion extending vertically. Howeversince I changed the styling of the list to accomidate the phone and faxlisting, to list “inline” the list is has now collapsed.

Can you show me how to write a class or ID for this list.

Once again I thank you for ;your assistance.

[JorgeM]

The first is why does the word “Galvanized” exceed the boundariesof the container box

You had set a width of 998px to that container so the width was able to accomodate this word on that specific line. The problem is that you have it shifted to the right because of margin-left: 1em;

I would like this to be an unordered list in the traditionalfashion extending vertically.

You then should not use the inline style on this list.

[Geffory]

This is the coding for CSS layout. if it is not working then simply to check problem in a div. you try to this code.

pictureBoxRight {
display: block;
width: 500px;
height: 475px;
border: 1px solid red; // this css property makes that red borders around divs on your page
padding: 0.2em;
float: right;
}
pictureBoxLeft {
display: block;
width: 450px;
height: 475px;
border: 1px solid red; // this css property makes that red borders around divs on your page
padding: 0.2em;
float: left;
}

if you want to change that then try to change the border property as follows

border: 1px solid red(or) blue (or) black; // whatever color you want here
(or)
border:none; // set this, if want no borders around divs

[Mitchelljonson]

We all need a gun team around us and the best way is the join the Property Mastermind Mentoring Program run by Whitton.

Positiverealestate.com.au