...

View Full Version : text-align:justify isn't working & DIVs overlapping..



DaDuck
08-14-2010, 03:49 AM
Hello, I believe my syntax is correct to do a text-align:justify- can you verify this? What did I do wrong?
Look at the site www.DACATS.COM/index1.html. The main body of text should be "justified"... The css is as follows:

.mainbox {
clear:right;
width:73%;
margin:10px 15px 10px 10px;
padding:20px;
color:navy
/* border:1px solid #000; */
}

.mainbox.p {
text-align:justify;
}

Thanks
DD

ch4sethe5un
08-14-2010, 04:14 AM
.mainbox {
clear:right;
width:73%;
margin:10px 15px 10px 10px;
padding:20px;
color:navy
/* border:1px solid #000; */
}

.mainbox.p {
text-align:justify;
}
The css you have is almost like this 'p.mainbox', which is saying that you want a <p> tag with a class name of 'mainbox' to apply the css to.

To get it the way you want
You can either do this:
.mainbox p {text-align:justify;} just <p> tags that are in a class .mainbox will have justified text

or

.mainbox {text-align:justify;} all text will be justified within a class .mainbox

ONE more thing:
Try not to use color:navy and try for color:#324873
Different browsers will render the 'navy' color differently.
try this site if you are looking for different colors. kuler.adobe.com

hope that helped

DaDuck
08-14-2010, 05:04 AM
Yes, that made sense. I tried both methods and understand.. That's a good point about color as well... much thanks for this information.

There's one other problem I haven't been able to solve yet.. I don't know if I should start a new post on it or do it here??

If I resize smaller my browser window on dacats.com/index1.html, the right side DIV, mainbox, gradually moves closer to the left side DIV, menubox. At some point when the window gets small enough the 2 containers over lap and text intermingles- and looks bad.. I thought I could fix this with a clear: right (see code below), but it is still happening...
What do I need to do to correct this???

code here:
.menubox {
float:left;
width:18%;
margin:10px 15px 10px 10px;
padding:20px;
/* border:1px solid #000; */
}

.mainbox {
clear:right;
width:73%;
margin:10px 15px 10px 10px;
padding:20px;
color:navy;
text-align:justify;
/* border:1px solid #000; */
}

.menubox ul {
/*width was 150 not 250*/
width:150px;
padding:0;
list-style-type:none;
font: bold 16px 'Comic Sans MS' , Comic Sans MS;
}

.menubox li {
background-color:#DDD;
background-image:url(/images/new/m_test2.gif);
margin:10;
padding:2px 10px:
border-width:1px:
border-style:solid:
border-color:#fff #666 #aaa #fff;
}

ch4sethe5un
08-14-2010, 05:30 AM
You have clear:both; on the footer so the floating is 'reset'. No need for clear:right on the .mainbox


.menubox {
float:left;
width:250px; width was 18%
margin:10px 15px 10px 10px;
padding:20px;
/* border:1px solid #000; */
}

.mainbox {
clear:right; <--dont use
width:73%; <--dont use
margin:10px 15px 10px 10px;
padding:20px;
color:navy;
text-align:justify;
/* border:1px solid #000; */
}


I think this is what you want correct?(first link)
http://www.maxdesign.com.au/articles/liquid/liquid-sample2/
http://www.maxdesign.com.au/articles/liquid/

DaDuck
08-14-2010, 05:48 AM
I modified my code to reflect your changes... Yes that is what I wanted..
I don't really understand what is happening with this code or why?? But that is what I want...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum