11 replies [Last post]
GraphiX2004
Offline
Regular
Last seen: 13 years 5 days ago
Timezone: GMT+1
Joined: 2009-09-24
Posts: 11
Points: 3

Hiya people, well i use tables for everything i normally
get every part spot on with tables my css coding isn't too bad but I've
hit a snag which i can't seem to understand maybe i can get some help.

For the example im using style=" so if people wanted to make a mock-up
they could just copy the code directly to a txt file and save as html.

One container of 700px wide with 2 div blocks inside the container.
Problem i'm having is aligning the blocks centered but i don't want them side by side.

i could float 1 block left the other right or i could use float: left, float: left,
or i could use display: inline, on both div's since div's are block elements if i
dont use float or inline the 2nd div will go under neath not on the same line.

But as soon as you assign a selector of display: inline; you cannot place spaces between
if you use float: left, float: right again you cannot put a defined space between or squash em closer.

Every way i try i get the following below as you can see the div's are not centered.

#container of 700px
----------------------------------------
--------- ---------
|(block)| |(block)|
--------- ---------

----------------------------------------
#end container
here is the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 
 <BODY>
<div style="width: 700px; height: 200px; margin: 0 auto; border: 1px solid black;">
  <div style="border: 1px solid black; margin: 0 auto; width: 200px; float: left;">test...</div>
 <div style="border: 1px solid black; margin: 0 auto; width: 200px; float: left;">test...</div>
 </div>
 
</BODY>
</HTML>

Now if i use float: left; display: inline; that works but i cannot add spaces to inline selector.
There must be a easy way to align two div blocks to the center inside a container div and then be-able to change the width between the two div blocks.

Any help would be appreciated.

the out come i need

Problem:
#container of 700px
----------------------------------------
--------- ---------
|(block)| |(block)|
--------- ---------

----------------------------------------
#end container

And be-able to edit the space between the two divs inside the container div.

GraphiX2004
Offline
Regular
Last seen: 13 years 5 days ago
Timezone: GMT+1
Joined: 2009-09-24
Posts: 11
Points: 3

Weird .. can't edit my own

Weird .. can't edit my own posts?

the 2nd diagram above is meant to show the 2 blocks centered
but when i posted it's ignored the line feed spacing the blocks out lol.

----------------------------------------
|||||||||||--------- ---------||||||||||
|||||||||||(block)| |(block) ||||||||||
|||||||||||-------- --------- ||||||||||

----------------------------------------
#end container

(had to add the ||| to represent blank space since
this forum aligns everything to the left.

I've just figured how to do it! finally works on both browsers
but is this sloppy or is this a valid way of doing it?

BTW div margin's dont work if you use the old doctype
you must use the below doctype otherwise you will not align a div center
when using internet explorer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<style type="text/css">
 
#container {
width: 700px; 
height: 200px; 
margin-left: auto;
margin-right: auto;
border: 1px solid black;
 
}
 
#left {
border: 1px solid black; 
margin: 0 auto; 
width: 200px; 
float: left;
position: relative; 
left:100px;
}
 
#right {
border: 1px solid black; 
margin: 0 auto; 
width: 200px; 
float: left;
position: relative; 
left:200px;
}
</style>
 
<div id="container">
<div id="left">test...</div>
<div id="right">test...</div>
 </div>
 
</BODY>
</HTML>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 3 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

GraphiX2004, this css should

GraphiX2004, this css should give you the same results. It's better to lay out a page using floats with margins, not relative or absolute positioning. Until you full understand how they work and effect their surroundings, you should avoid using them. If you truly wish to understand proper ways to lay out a page, visit Layout Gala and study the code. Practice the code for the different techniques. Research the different techniques like, fixed, fluid, liquid, and hybrid layouts.

#container {
	width: 700px;
	height: 200px;
	margin: 0 auto;
	border: 1px solid black;
 
}
#left {
	border: 1px solid black;
	margin: 0 0 0 100px;
	width: 200px;
	float: left;
}
#right {
	border: 1px solid black;
	margin: 0 100px 0 0;
	width: 200px;
	float: right;
}

GraphiX2004
Offline
Regular
Last seen: 13 years 5 days ago
Timezone: GMT+1
Joined: 2009-09-24
Posts: 11
Points: 3

hiya cupid, thanks for the

hiya cupid,

thanks for the tip the thing with div and css you can achieve the same results
by creating totally different selectors, but with a lot of messing about there
is about 5 different ways of achieving this simple task above.

i don't know what it is or why but i don't like settings of margins i feel
this should be-able to be done somehow without floats and without margins.

this is the only gripe i have with

's if you need to start positioning them.

The example i give above that works I've tried over all browsers and all res down to 1024.
seems to display correctly is there any reason i shouldn't stick with the current way?

any further information or views on this is more than welcome
Quite surprised t-bone has not jumped in on this topic yet Smile

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 41 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

My Solution

I know people have problems with absolute and relative positioning and such. And they may take issue with this method.

You say you don't like to set margins. So this may not be the solution your looking for.

If i understand the problem correctly. I believe the below code is what you are wanting to achieve.

Your width and height of your container is set to 700px and 300px.

Giving the two divs below an absolute value means your placement is relative to your #container.

I place via margins. As it has been the path of least resistance in my experience.

If you do the math your container is 200px tall so

respectively:
.left
{
margin: 75px 0 0 355px;
}

and

.right
{
margin: 75px 0 0 150px;
}

will place where you want. And you can tweek it as the content changes.

If you want to move the container and everything in it. You can also margin # container and move it the same way. And the two elements located within will maintain their position relative to the width and height of #container.

#container {
width: 700px;
height: 200px;
margin: 0px auto;
border: 1px solid black;

}

.left {
position:absolute;
border: 1px solid black;
margin: 75px 0 0 355px;
width: 200px;
}

.right {
position:absolute;
border: 1px solid black;
margin: 75px 0 0 150px;
width: 200px;
}

test...
test...

GraphiX2004
Offline
Regular
Last seen: 13 years 5 days ago
Timezone: GMT+1
Joined: 2009-09-24
Posts: 11
Points: 3

Hiya T-Bone ! knew you'd

Hiya T-Bone ! Smile

knew you'd eventually get around to this great work you've
got rid of the two floats left's or 1 float left float right.

the more i dig into this the more questions it raises then answers

a div is a block element right so when you end a

shouldn't anything else below that

appear on a separate line?

for instance i would of thought since a div is block level

test...
test...

would be staggered not on the same line but even though the div's are closed
they still appear on the same line

until a put a between them then they are staggered

does having another div under a div cancel out a hard line break (i.e. line return)
or does that only count if the content under the div tag is other html code?

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 41 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Answer

With this new update. Which I will say looks good. I am seeing some missing information in your question. As I have re-read my initial response . . . and I see missing pieces of html.

Hopefully this will answer your question.

Everyone codes a little differently. Yes. The position of the

in the html has some bearing on it's position. But it is also based upon how you declare the position in the style.

If you set the position to absolute . . . the position will be absolute relative to it's container. And you essentially are saying you want to place it manually.

I generally build a series of containers and let the content flow down those containers.

The main container that holds everything in it is an id that opens a the top and closes at the bottom.

html>body #master_container
{
margin: 0px auto;
width:1013px;
}

Then I generally have an id for the header. One for the left column if there is one. One for the middle column if there is one. And one for the right column if there is one. And one for the footer if there is one. And depending on the problems or necessity of that layout I find you get the cleanest cross browser results placing the key containers with position:absolute; relative to #master and doing my best to let all the content I put within each container to flow down that container. Which it will do unless I set it's position to absolute. And the position becomes absolute RELATIVE to the container it is nested in.

You are better off limiting the absolutely positioned elements to the large containers that house however you block out a page. And keeping additional

declarations within those to a minimum. Which can be hard to do at first.

You can either pull images in through a stylesheet or and class declaration, or you can use the old school embed in the html. Which honestly in my experience has been more stable. And everything will flow down the container.

Does that answer your question?

GraphiX2004
Offline
Regular
Last seen: 13 years 5 days ago
Timezone: GMT+1
Joined: 2009-09-24
Posts: 11
Points: 3

yep sure does you've been

yep sure does you've been very helpful with my questions
and i do appreciate it I've learned a little more now than i did
when i first joined, because I'm a messier and mauler i have so many
questions i'm one of these people who if i own say a car i have to know every single peice part and how it all works together before i drive it.

same goes for my html/php/mysql, and now CSS.

so if you have 2 div's not set as any position absolute or relative
then what do they default too? would it be auto? since they appear on the same line. or would they default to relative.

GraphiX2004
Offline
Regular
Last seen: 13 years 5 days ago
Timezone: GMT+1
Joined: 2009-09-24
Posts: 11
Points: 3

This new skin/theme is

This new skin/theme is cutting words of left and right on posts.
which is now silly as most of the time its important content that
is actually missing,

anyone else having this issue ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A proper use for inline-block

As I said in the other thread, this is trivial.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 7 December 2008), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <title></title>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
  <meta name="author"
        content="Gary Turner" />
  <style type="text/css">
/*<![CDATA[*/
  #wrapper {
    border: 1px solid black;
    margin: 0 auto;
    text-align: center;
    width: 700px;
    }
 
  .content {
    border: 1px dotted black;
    display: inline-block;
    margin: 75px 10px;
    text-align: left;
    vertical-align: top;
    width: 200px;
    }
 
  /* the following two selectors are for IE6 and IE7 */
  * html .content {
    display: inline;
    }
 
  *+html .content {
    display: inline;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="wrapper">
    <div class="content">
      <h2>A content block</h2>
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
      vehicula, lorem eu imperdiet gravida, felis neque adipiscing
      ligula, at convallis erat tortor non sem. Vivamus eleifend orci
      eu magna tempus feugiat. Praesent congue interdum lobortis?
      Aenean condimentum sem odio. Sed feugiat ultrices feugiat. Sed in
      tellus nisl, sed pulvinar nibh. Quisque in tempus tellus.
      Suspendisse vitae sollicitudin libero. Etiam vulputate cursus
      lectus ac porta. Nunc quis velit sed nibh consectetur viverra?
      Pellentesque habitant morbi tristique senectus et netus et
      malesuada fames ac turpis egestas. Nam quis tortor sapien, at
      pellentesque purus! Ut at diam non tellus elementum consectetur
      ac eu nisl. Cum sociis natoque penatibus et magnis dis parturient
      montes, nascetur ridiculus mus. Mauris enim urna, pretium id
      molestie sodales, aliquam vitae ligula. Donec dapibus dictum leo,
      bibendum tincidunt nisi eleifend in. Donec dui magna, porttitor
      vitae semper quis, sollicitudin nec tellus. Sed nec condimentum
      tellus. Sed et tortor sit amet massa facilisis scelerisque. In
      non elit purus.</p>
    </div>
 
    <div class="content">
      <h2>A content block</h2>
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
      vehicula, lorem eu imperdiet gravida, felis neque adipiscing
      ligula, at convallis erat tortor non sem. Vivamus eleifend orci
      eu magna tempus feugiat. Praesent congue interdum lobortis?
      Aenean condimentum sem odio. Sed feugiat ultrices feugiat. Sed in
      tellus nisl, sed pulvinar nibh. Quisque in tempus tellus.
      Suspendisse vitae sollicitudin libero.</p>
 
      <p>Etiam vulputate cursus lectus ac porta. Nunc quis velit sed
      nibh consectetur viverra? Pellentesque habitant morbi tristique
      senectus et netus et malesuada fames ac turpis egestas. Nam quis
      tortor sapien, at pellentesque purus! Ut at diam non tellus
      elementum consectetur ac eu nisl. Cum sociis natoque penatibus et
      magnis dis parturient montes, nascetur ridiculus mus. Mauris enim
      urna, pretium id molestie sodales, aliquam vitae ligula. Donec
      dapibus dictum leo, bibendum tincidunt nisi eleifend in. Donec
      dui magna, porttitor vitae semper quis, sollicitudin nec tellus.
      Sed nec condimentum tellus. Sed et tortor sit amet massa
      facilisis scelerisque. In non elit purus.</p>
    </div>
  </div>
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

GraphiX2004 wrote:… so if you

GraphiX2004 wrote:

… so if you have 2 div's not set as any position absolute or relative then what do they default too? would it be auto? since they appear on the same line. or would they default to relative.

If no position is declared otherwise, the initial state is static, that is, in the flow.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 41 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

No Problem

I understand.

I looked at Gary's code and I can say that he is someone worth listening to. He gave you a pretty good model for your needs.

To specifically answer your question.

If you do not specify a position for the subsequent

with absolute or what not and it is nested within a container.
<div id = "container">
<div class = "lower">this content will flow in line within the constraints of the above container in order.<br/>and such can also be used to move it down.  Specific margin properties and widths can be set for this content.  And it can also be broken off and set to absolute and moved in this container independently of the rest of the content.
</div>
</div>

I am sorry. But I am busy and don't have time to generate a relevant stylesheet.