?
Solved

css padding height relationship

Posted on 2008-11-12
16
Medium Priority
?
527 Views
Last Modified: 2012-05-05
i have two div tag.
div1 and div2
do you know how div1 can follow div2 height?

http://www.filemakersupport.net/kad/design02/index.html
Picture-3.png
0
Comment
Question by:Hiroyuki Tamura
  • 5
  • 4
  • 3
  • +2
16 Comments
 
LVL 6

Expert Comment

by:matthewrhoades
ID: 22945810
So you want them side by side as above the same height?  Next to each other?
0
 
LVL 6

Assisted Solution

by:matthewrhoades
matthewrhoades earned 80 total points
ID: 22945839
HTML:

<div id="container">
     <div id="div1"></div>
     <div id="div2"></div>
</div>

CSS:

#container { background: url(the_Url_Of_The_Background_Image.gif) repeat-y 0% 0%; }
#div1 { float:left; width:50%;}
#div2 { marging-left:50%; width:50%;}
0
 
LVL 15

Assisted Solution

by:quincydude
quincydude earned 260 total points
ID: 22946135
You can also use the table approach

<table id="holder">
     <tr><td>
             <div id="div1"></div>
     </td><td>
             <div id="div2"></div>
     </td></tr>
</table>

with style
#holder {vertical-align:top; border: 0px;}
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:Hiroyuki Tamura
ID: 22946929
thank you.
i have two div, #lowerright and #lowerleft
i set container div.
even i don't have any background image, do i have to set some?
0
 
LVL 15

Expert Comment

by:quincydude
ID: 22946998
you do not have to add the style

#container { background: url(the_Url_Of_The_Background_Image.gif) repeat-y 0% 0%; }

if you do not have a background set
0
 

Author Comment

by:Hiroyuki Tamura
ID: 22947034
thank you.
i'm trying to test it.
could you please take a look this test site;
http://www.filemakersupport.net/kad/design04/index.html
do you know what's wrong with it?
0
 
LVL 43

Assisted Solution

by:David S.
David S. earned 80 total points
ID: 22947204
You mistyped "margin".

The CSS Validator is great for finding errors like that: http://jigsaw.w3.org/css-validator/
0
 
LVL 15

Assisted Solution

by:quincydude
quincydude earned 260 total points
ID: 22947236
#div2 { marging-left:50%; width:50%;} should be
#div2 { margin-left:50%; width:50%;}

you can also try out the code I posted as putting it in a cell ensures the items in different cells to be on the same row, in other words, placed horizontally.
0
 

Author Comment

by:Hiroyuki Tamura
ID: 22947415
thank you.
now div2 left-border doesn't align.
http://www.filemakersupport.net/kad/design02/resources.html
do you know why?
0
 
LVL 15

Accepted Solution

by:
quincydude earned 260 total points
ID: 22947824
seeing your page make me think you should implement it using table instead. As Divs are independent of each other's positioning but table cells can control it well.
Here's the sample layout of your site in table format.
<table id="main">
 
	<tr><td id="upperleft"></td>
 
	<td id="upperright">
		<div id="image_title">
			
		</div>
	</td>
	</tr>
 
	<tr><td id="lowerleft">
	</td>
 
	<td id="lowerright">
 
		<div id="image_main">
        </div>
	</td>
	</tr>
	<tr><td id="bottom" colspan="2">
	
	</tr>
</table>

Open in new window

0
 
LVL 6

Expert Comment

by:matthewrhoades
ID: 22951707
Tables are not intended to be used for display purposes as DIVs and SPANs are.

http://www.yourhtmlsource.com/stylesheets/csslayout.html

If you have problems with your DIV positioning you can set relative, static and absolute positioning to ensure that everything lines up where you want it to.  

Set the TOP attribute of your DIV elements to the same value and you will be fine lining them up horizontally.  If you want to line them up vertically set the LEFT attribute the same across the board.

DIVs seem a little bit more painful when tables are so easy to format, but it is the correct way of doing it.
0
 
LVL 3

Assisted Solution

by:colinspurs
colinspurs earned 80 total points
ID: 22952909
Hi,

Try this:

Float: left; the 2 right hand divs; clear: both for the bottom div.  Give lowerright the same width as upperright ie 600px.  I think that's it...here's the new CSS.

I changed some border colours for clarity in testing, and added my own image for the same reason.

My test result is in http://fobgfc.org/aaa.php

Cheers,
   
    Colin
#upperleft {
width : 81px;
height : 130px;
float : left;
border-bottom : 2px solid red;
}
#upperright {
float: left;
width : 600px;
height : 130px;
margin-left : 0;
border-left : 2px solid green;
border-bottom : 2px solid green;
}
#lowerleft {
width : 81px;
float : left;   
height : 250px;
border-right: 2px dotted orange;
}
#lowerright {
height : 500px;
border-left : 2px solid blue;
float: left;
width: 600px;          
}
 
#bottom {
width : 100%;
height : 35px;
text-align : center;
clear: both;        
}

Open in new window

0
 
LVL 3

Expert Comment

by:colinspurs
ID: 22952937

Whoops that should be http://www.fobgfc.org/aaa.php
0
 

Author Comment

by:Hiroyuki Tamura
ID: 22969645
thank you all,
i get small space in between.
http://www.filemakersupport.net/kad/design04/design01.html
do you know how to fix this?
0
 
LVL 3

Expert Comment

by:colinspurs
ID: 22970820
You have not implemented my suggestions, notably floating the right hand side divs.

Also, using IE7 the problems are more evident than just small spaces present.
0
 

Author Closing Comment

by:Hiroyuki Tamura
ID: 31516218
Thank you.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month13 days, 18 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question