Jump to content

Css Placement Problem


Recommended Posts

In working with a page for a website, I don’t understand twobehaviors 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 boxleft and picture box right next to each other. One on the left and the other onthe right.


In the display the two <div>s are stacked verticallywhich is one of the problems and the second issue is that I see red marks thatI don’t recognize in the script. Iwanted to see the boundaries of the two divisions.




I would appreciate help in resolving these issues.









Link to comment
Share on other sites

Change the css for .pictureBoxRight and the left one to display block. When I did this the border showed up.

Now float these respectively right and left. Then sit the margins to get them where you want them.

After the two divs box right make a div with class of clear and make this the clear class




I do not know why but with html5 I have had problems with clearing the float rule in the div that follows but this works.

You are very class heavy. You should use id's and use classes only when you need to use the css on an element more then once per page. Also it is better to use margins and padding instead of line breaks.

This is all of the time I have I will check back in the morning have a good night.

Link to comment
Share on other sites




I am following up on your advice and the page is getting closer to what I expect. Thanks for your observations. As I get closer to completion I will continue to follow your suggestions. In the first row the two images on the right seem to wrap around as oppose to be flush on the same row. Do you see anything in my script that causes this?

Thanks for your help


Link to comment
Share on other sites

I note the following:

  • The conditional IE statements belong inside the head section
  • Your siteContainer is wider than your headerContainer, mottoContainer, and contactContainer which are not centered
  • <br> are line breaks. - to break a paragraph, use the p tag. (you don't even need the closing p tag for html5, just start your next paragraph with an opening p tag
  • I would just use one pictureBox class and float them all left. Make sure that 2 can fit next to each other, and adjust margins to center them out. That way, you'll end up with 2 in a row automatically.
  • Your pictureBox has a fixed height and width, but the 2 images you're trying to add to the second one don't fit.

I don't think the display block has any effect - a div is a block level element by default.

Link to comment
Share on other sites

In the content info section I would make it a unordered list like this:

The html

	<li>phone info</li>
	<li>fax stuff</li>
	<li>email stuff</li>
The css
ul {
li {
display:inline; or display:inline-block;
/*Add margin and padding as needed to line up the way that you want. Also you have to float them right or left to get them to display horizontal*/


Remember to use css and not &anbsp for positioning. Make the changes that Andrea and I gave you, then let us know and we can go from there.



Andrea, I did not know about not having to close the p tag. I am always learning from you thank you. Although I will probably still close it because it will look funny to me.

Edited by grabenair
Link to comment
Share on other sites

Grabenar, and Andrea:


Thanks for your assistance. Things are getting better with this display after following most of youadvice and suggestions. I am now down totwo 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.





Link to comment
Share on other sites

The text that includes 'galvanized' is inside a container called contentContainer. It has a yellow border, which I can see on my monitor - so I see that the contentContainer actually runs over the right edge of the main container. (if you can't see the yellow line, change the color and it'll become clear)


Your main container - siteContainer ' is 1000px wide.

contentContainer is 998px wide, and to that, you have to add the 2px of the borders (1px right, 1 px left) - so you have the 1000px right there. In addition to that, this div also has a left margin of 1 em - which pushes it exactly 1 em over the right edge of its main container. For one, don't mix px with ems - it's confusing. For two, get rid of this margin alltogether, and the contentContainer will fit properly into the siteContainer and galvanized will behave.


Give your fax ul a class or id and use the CSS to go inline accordingly - then it won't affect your other list.

Link to comment
Share on other sites

The list that you want to go inliine - the one with the fax stuff, add a class to its ul: (and get rid of those nbsps)


<ul class="inline"> 

              	<li>                        <strong>                            Direct Sales Phone # (651) 338-4341   

                  	</strong>                    </li>                    <li>                        Phone (877) 348-1995    
            	</li>                    <li>                        Fax # (877) 348-1994      


<li><a href="[email="Sales@ABCwiresales.com"]mailto:Sales@ABCwiresales.com[/email]">Sales@ABCwiresales.com</a></li> 


Then route them inline via:


.inline li { display: inline;}


That way, a normal list (without the class of .inline) won't be affected.

Edited by Andrea
Correction - it's display inline, not line-style......
Link to comment
Share on other sites

Is the link up there still the page you are working on? If so, you still have several of the mistakes I already mentioned.


I see you already added the class to your contact list. Now add


.inline li {

display: inline;



to your CSS, so the inline display is only applied to the li tags inside the .inline class but your other list does not change.


I'd also add approx. 15px of right and left margin to the .picturebox, so it centers better.

Link to comment
Share on other sites

You really need to put all of that stuff above your head tag in the head. It has to do with making it change for the screen size and other stuff. If you are wondering where to put it copy everything and past it right before that IE7 stuff right before the closing head tag. Fix the code as Andrea said.


Just a couple of things for looks. Get rid of the # for the phone numbers or make it constant. In the copyright you do not need the word (to) that is what the dash is for. You will have to come back every year and change the date. When you get everything done I will teach you how to make it do it by itself. But only when everything else is done.


I have a question is this going to be the only page for the site? If it is I feel that it would look better if all three images where beside each other, but that is just me.


One more question is the logo something new that you made or is it one they already have established for the company?

Link to comment
Share on other sites

You folks have be really helpful and patient with me. Thanks! I don't think I have done everything you suggested, but I am trying to process all of this. Here are last changes that I completed.

to add spaces on the un-ordered list that shows the phone numbers I added right margin to the <li> element like this:


padding-right: 10px;



Is there a better way to do this?


I have altered the HTML code to place the conditional IE statements in the head.

Now I'll go back and read your notes to me to see if I have addressed all of your observations.



That was the Logo that the company uses and this will be a one page site.

Once again thanks

Link to comment
Share on other sites


I just got a last request to place a line about shipping possibilities below the ABC Wire Sales in the upper right of the screen. So now I am doing that.

The site owner wants me to place a sentence "Shipping from production points across the USA ..." directly under the ABC Wire that is in the upper right of the display.

So I'll be doing that tonight.

Edited by williamrouse
Link to comment
Share on other sites

Your last question take the line of text out of the new div (and git rid of the new div) and make it an h2 or a p tag. I would make it an h2 and just put in in the headcontainer after the h1. Then postion it with css. The reason I would make it an h2 is for SEO. You have an h3 later in the contactContainer. H tags should be in order from top to bottom of page for SEO reasons. But first put this as your first css rule because I see some default margin that needs to be gone to help with placing elements in your head.

h1,h2,h3,h4,h5,h6,p {
margin: 0;


You probably do not need it all of the way to the h6 but way not it will be there if you need it and will not have to go back and fix it later. What this does is strip out any defaults that a browser put in by default. You can then go back and add css to the p tag and sit the margin bottom to something that looks good and they will now all be constant.


To get everything to line up you can give the img,h1,h2 an id for targeting with css. For the img to put in an id add, id="logo", or whatever you want after the height.


You can get rid of the mottoContaner if you want and put the p that is in it in your head container after the new h2 you are going to add there. But not necessary, just cleaner code.


The rule you added to the li is right but you do not need a new li just add it to your .inline li rule.


I was looking through all of yo0ur css and you need to move all of the styles you add up to line 95 in the template. Why, your css need to be above the @media rules.


Is this just a template you are using or a web service site?


On your h tags you can get rid of the line-height part of the css, not needed.


Back to the header. Get rid of the vertical-align: middle. This is going to help with placing things in your header. Like I stated earlier give the logo an id and now give your h1 and h2 an id and use margins and padding for placing.


Here is what is called short hand for css, margin: 1px 2px 3px 4px; Here is how it works the 1 is top 2 right 3 bottom 4 left. There are other ways to do this but for now just use this. I think you may be getting a bit overwhelmed.


I am going to leave you with this for now and give you more latter.

Edited by grabenair
Link to comment
Share on other sites


so far I have changed the as much as I understood of your suggestion and in the three lines that I want to resolve the display is more disorganized than I imagine. I uploaded the source so you can point to me what I am lacking in your suggestions. I would appreciate you take a look and let me know how far astray I am from your thoughts to organize the top 3 lines.


I am not getting the "Shipping from production ..." under the "ABC Wire Sales".

Will work on it some more after dinner.

Edited by williamrouse
Link to comment
Share on other sites

In the header get rid of the float right and place it with margin. You will have to play with just how much left and top on the h1 and same for the h2. August the font size of the h2 to get it on one line. You will see what I mean when you get rid of the float right. It should move the h tags all the way left then move them right and down with margin.


I sent you a massage through the form

Edited by grabenair
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...