Web Design Forums

Ehab · 14-04-2008, 02:00

Hi,
I am trying to get two divs to appear next to each other within another div and I cant seem to get it to work anyway I try it !! They still appear on top of each other instead. Ive set borders on each to clarify it. I set the width of one to 60% and the other to 40%, set the margins left and right to 0 and I remembered something the guy said in class about displaying them inline so i tried that too but it screwed up the whole page

I was wondering if anybody here can give me a hand. Here is the CSS and then the html I am using. I wish I had hosting somewhere I would have pasted links instead but I dont. Thanks in advance.

CSS:

body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
background-image: url(images/bg.jpg);
}

#leftFloat
{
width:15%;
height: 100%;
float: left;
position: absolute;
top:0px;
left:0px;
background-image:url(images/sh_lf.png);
background-repeat: repeat-y;
background-position: right;
display: inline;
}

#main
{
position:absolute;
top: 0px;
left: 15%;
width: 70%;
height: auto;
display: inline;
background-color: #FFFFFF;
}

#rightFloat
{
width:15%;
height: 100%;
float: right;
display: inline;
position: absolute;
top:0px;
right:0px;
background-image:url(images/sh_rt.png);
background-repeat: repeat-y;
background-position: left;
}

#header {
background-image: url(images/5.png);
background-repeat: no-repeat;
height: 270px;
}

#menu
{
background-color: #BED6E3;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
word-spacing: 5px;
text-align: right;
padding: 10px;
color:#FFFFFF;
font-weight:bolder;
}

a:link {color: #FFFFFF; text-decoration: none}
a:hover {color: #0A3245; text-decoration: none}

#contentLeft
{
border: thin red solid;
margin: 0px;
width: 60%;
padding: 30px;
}

#contentRight
{
border: thin red solid;
margin: 0px;
width: 40%;
padding: 30px;
}

/* border-right: 2px dotted #999999; */

h1
{
font-size: 20px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#EEC00D;
text-align: left;
margin: 0 0 30px;
line-height: 1em;
}

h2
{
font-size: 14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#707070;
text-align: left;
margin-top: 0px;
font-variant: small-caps;
line-height: 1em;
}

p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #177482;
text-align: justify;
line-height: 1.5em;
word-spacing: 0px;

}

ul, li
{
list-style-image: url(images/bt.png);
list-style-position: inside;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #177482;
text-align: left;
line-height: 1.5em;
padding-left: 0px;

}

#footer
{
background-color: #BED6E3;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
word-spacing: 5px;
text-align: center;
padding: 10px;
color:#FFFFFF;
font-weight:bolder;

}

HTML:

<body>

<div id="leftFloat"></div>

<div id="main">

<div id="menu"><a href="home.htm">Home</a> | <a href="technology.htm">Technology</a> | <a href="solutions.htm">Solutions</a> | <a href="clients.htm">Our Clients</a> | <a href="about.htm">About Us</a> | <a href="contact.htm">Contact Us</a></div>

<div id="header"></div>

<div id="contentLeft">
</div>

<div id="contentRight"></div>

<div id="footer"><a href="contact.htm">Privacy Policy</a> | <a href="contact.htm">Site Map</a> | <a href="contact.htm">RSS Feed</a> | <a href="contact.htm">Contact Me</a> | <a href="contact.htm">Get a quote</a></div>

</div>

<div id="rightFloat"></div>

</body>
</html>

Ehab · 14-04-2008, 02:11

another little issue i ran into.. i am trying to display a drop shadow to the main div by setting the background image on both floats to left and right positions and heighting it to 100% which works if you dont scroll the page, but as soon as you do the shadow disappears and i guess the float all together does not extend beyond the browser window. any tips on what im doing wrong there too are greatly appreciated

thanks..

.sleep · 14-04-2008, 03:25

You can't float AND position an element. It's redundant. Stick with the floats. Positioning absolutely is kinda a poor choice, unless its completely necessary.

In order to float, the element has to have display:block; so inline wouldn't work.

evzx · 01-05-2008, 11:29

Is that really the case? I have used display: inline before to correct IE6 problems with creating a double margin in the same direction as my float. For example with a float: left and a margin-left: 10px, in IE6 the margin would be doubled, so I use the display: inline "hack" to give me the correct margin.

pgo · 01-05-2008, 11:46

If you don't know how to use positioning, don't use it!

Floats are more than sufficient for 95% of tasks. You just have to actually learn how they work.

flappypenguin · 02-05-2008, 18:05

you cant use FLOAT and POSITION on the same element, just add float:left to each div, as long as they have enough room, they will sit next to each other.

Try looking for a book called CSS Mastery by Andy Budd, im sure it will clear allot of issues and explain how css works best for you.

14-04-2008, 02:00	#1 (permalink)
Ehab is gta4 addicted.. Join Date: Apr 2008 Location: San Diego, CA Posts: 24	Display: Inline ? Hi, I am trying to get two divs to appear next to each other within another div and I cant seem to get it to work anyway I try it !! They still appear on top of each other instead. Ive set borders on each to clarify it. I set the width of one to 60% and the other to 40%, set the margins left and right to 0 and I remembered something the guy said in class about displaying them inline so i tried that too but it screwed up the whole page I was wondering if anybody here can give me a hand. Here is the CSS and then the html I am using. I wish I had hosting somewhere I would have pasted links instead but I dont. Thanks in advance. CSS: body { width: 100%; height: 100%; margin: 0px; padding: 0px; text-align: center; background-image: url(images/bg.jpg); } #leftFloat { width:15%; height: 100%; float: left; position: absolute; top:0px; left:0px; background-image:url(images/sh_lf.png); background-repeat: repeat-y; background-position: right; display: inline; } #main { position:absolute; top: 0px; left: 15%; width: 70%; height: auto; display: inline; background-color: #FFFFFF; } #rightFloat { width:15%; height: 100%; float: right; display: inline; position: absolute; top:0px; right:0px; background-image:url(images/sh_rt.png); background-repeat: repeat-y; background-position: left; } #header { background-image: url(images/5.png); background-repeat: no-repeat; height: 270px; } #menu { background-color: #BED6E3; font-family: Arial, Helvetica, sans-serif; font-size: 10px; word-spacing: 5px; text-align: right; padding: 10px; color:#FFFFFF; font-weight:bolder; } a:link {color: #FFFFFF; text-decoration: none} a:hover {color: #0A3245; text-decoration: none} #contentLeft { border: thin red solid; margin: 0px; width: 60%; padding: 30px; } #contentRight { border: thin red solid; margin: 0px; width: 40%; padding: 30px; } /* border-right: 2px dotted #999999; / h1 { font-size: 20px; font-family:Georgia, "Times New Roman", Times, serif; color:#EEC00D; text-align: left; margin: 0 0 30px; line-height: 1em; } h2 { font-size: 14px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#707070; text-align: left; margin-top: 0px; font-variant: small-caps; line-height: 1em; } p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #177482; text-align: justify; line-height: 1.5em; word-spacing: 0px; } ul, li { list-style-image: url(images/bt.png); list-style-position: inside; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #177482; text-align: left; line-height: 1.5em; padding-left: 0px; } #footer { background-color: #BED6E3; font-family:Arial, Helvetica, sans-serif; font-size: 10px; word-spacing: 5px; text-align: center; padding: 10px; color:#FFFFFF; font-weight:bolder; } HTML:* <body> <div id="leftFloat"></div> <div id="main"> <div id="menu"><a href="home.htm">Home</a> \| <a href="technology.htm">Technology</a> \| <a href="solutions.htm">Solutions</a> \| <a href="clients.htm">Our Clients</a> \| <a href="about.htm">About Us</a> \| <a href="contact.htm">Contact Us</a></div> <div id="header"></div> <div id="contentLeft"> </div> <div id="contentRight"></div> <div id="footer"><a href="contact.htm">Privacy Policy</a> \| <a href="contact.htm">Site Map</a> \| <a href="contact.htm">RSS Feed</a> \| <a href="contact.htm">Contact Me</a> \| <a href="contact.htm">Get a quote</a></div> </div> <div id="rightFloat"></div> </body> </html> Last edited by Ehab : 21-04-2008 at 08:31.

01-05-2008, 11:46	#5 (permalink)
pgo Moderator Join Date: Jan 2005 Location: Brooklyn, NYC Posts: 11,869	If you don't know how to use positioning, don't use it! Floats are more than sufficient for 95% of tasks. You just have to actually learn how they work. __________________ Find good advice in the beginners web design thread. patrick o'neill web developer \| blog \| spam humor

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

14-04-2008, 02:11	#2 (permalink)
Ehab is gta4 addicted.. Join Date: Apr 2008 Location: San Diego, CA Posts: 24	another little issue i ran into.. i am trying to display a drop shadow to the main div by setting the background image on both floats to left and right positions and heighting it to 100% which works if you dont scroll the page, but as soon as you do the shadow disappears and i guess the float all together does not extend beyond the browser window. any tips on what im doing wrong there too are greatly appreciated thanks..

14-04-2008, 03:25	#3 (permalink)
.sleep Senior Member Join Date: Mar 2007 Location: california Posts: 230	You can't float AND position an element. It's redundant. Stick with the floats. Positioning absolutely is kinda a poor choice, unless its completely necessary. In order to float, the element has to have display:block; so inline wouldn't work.

01-05-2008, 11:29	#4 (permalink)
evzx Registered User Join Date: May 2008 Location: Denver, CO Posts: 2	Is that really the case? I have used display: inline before to correct IE6 problems with creating a double margin in the same direction as my float. For example with a float: left and a margin-left: 10px, in IE6 the margin would be doubled, so I use the display: inline "hack" to give me the correct margin.

02-05-2008, 18:05	#6 (permalink)
flappypenguin shouting at a monitor! Join Date: May 2008 Location: Glasgow, Scotland Posts: 10	you cant use FLOAT and POSITION on the same element, just add float:left to each div, as long as they have enough room, they will sit next to each other. Try looking for a book called CSS Mastery by Andy Budd, im sure it will clear allot of issues and explain how css works best for you.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)