[Notorion]

Hi, I'm having issues with nested divs. Let me show you what I have and what I am going for (See below)

The problem: I thought creating a main div / container (I called it wrapper) and setting the size was a smart idea. I want a picture on the left and text to go with it on the right. So, I thought ok, make the wrapper/container div, place it. I did that, then make a div, and put the image in the div. Check. I floated the image to the left side. Then I thought same thing for the text, piece of cake right? create a div for that, add in text, float it to the right. Why isn't it working? I don't understand, because as a concept it should work. I'm at a roadblock, and will keep thinking on this, but would appreciate anyone's help.


HTML code:

<div id="wrapper">

	<div id="image">
	<img border="0" src="images/main1.jpg" alt="FrontPageImage" width="450" height="335"></img>
	</div>

	<div id="sidebar">	
		<h1 id="textTitle"> Residential Services </h1>
		<p id="text">Lorem ipsum dolor ... yadda yadda</p>
	</div>

</div>

CSS code:

#wrapper {
	width: 940px;
	margin: 40px;
	margin-left: 20px;
}

#image {
	width: 450px;
	margin: 40px 20px 0px 0px;
        float: top;
}

#sidebar {
	width: 400px;
	float: right;
	margin: 0px;
}

#textTitle {
	color: #ee282e;
	background: #000000;
}

#text {
	background: #ffffff;
}

So, with this code here is what I am getting:



Here is what I want:

[Dormilich]

you said you floated the image left, but there is no such instruction in the CSS. instead you have written float: top which is an invalid value and hence ignored.

PS. you don’t need all those <div>s. it would suffice to float the image only and then the text (headings, paragraphs) will float around it without further float instructions.

[AnalyticLunatic]

Little harder to tell since I'm not using your images, BUT, try changes your css #images to "float: left" instead of "float: top", this might fix it.

Let me know, if not, will look more into it.

EDIT: Dormilich beat me to it!

This post has been edited by AnalyticLunatic: 27 November 2012 - 10:38 AM

[Notorion]

Ok, so I changed it to float left instead of top. That does make more sense ty.

The reason I added and have the main wrapper div and then the 2 others, is due to the design that I was given. A certain amount of space is needed between the picture, and the text 30px. That's why I wanted to put a div around it. Which, I want the text div on the right instead of simply float around the image. So, now that you know WHY I have done it this way, and what I am going for, is there a better way to do it?

Ok, so not sure why, but the float left did this, and maybe I'm just confused as to what is really happening, but when I did float:left check out what happened.



I wanted them even height and width (text and picture match) with 30 px in between. How would you do it?

[Dormilich]

Notorion, on 27 November 2012 - 07:57 PM, said:

I wanted them even height and width (text and picture match) with 30 px in between. How would you do it?

paddings (inner box distance) and margins (outer box distance). applied to the appropriate elements. e.g. the wrapper should get the top-padding of the 30px. the image could get a right-margin. just play around with it.

This post has been edited by Dormilich: 27 November 2012 - 12:13 PM

[Notorion]

Ok, I'm confused as to why you say that though. I will play with it, but it doesn't make sense to me why the wrapper would get padding of 30px to make space between text and picture (in the middle).

Also, why would the image get a right margin? Is this the same effect as float left? Is what your suggesting basically specific positioning within a div?

This post has been edited by Notorion: 27 November 2012 - 12:31 PM

[Dormilich]

Notorion, on 27 November 2012 - 08:27 PM, said:

Ok, I'm confused as to why you say that though. I will play with it, but it doesn't make sense to me why the wrapper would get padding of 30px to make space between text and picture (in the middle).

I mixed that 30px up. but since you wanted the image and the text to start at even height …

Notorion, on 27 November 2012 - 08:27 PM, said:

Also, why would the image get a right margin? Is this the same effect as float left? Is what your suggesting basically absolute positioning within a div?

an image says more tha 1000 words (esp. if it is ASCII art (pun intended)):

+--------------------------------------------+
|                                            |
+------------------------+                   |
|       top margin       |                   |
|   +----------------+   |  space for        |
| l |<image>XXXXXXXXX| r |  non-floated      |
| e |XXXXXXXXXXXXXXXX| i |  text to occupy   |
| f |XXXXXXXXXXXXXXXX| g |                   |
| t |XXXXXXXXXXXXXXXX| h |                   |
|   |XXXXXXXXXXXXXXXX| t |                   |
| m |XXXXXXXXXXXXXXXX|   |                   |
| a |XXXXXXXXXXXXXXXX| m |                   |
| r |XXXXXXXXXXXXXXXX| a |                   |
| g |XXXXXXXXXXXXXXXX| r |                   |
| i |XXXXXXXXXXXXXXXX| g |                   |
| n |XXXXXXXXXXXXXXXX| i |                   |
|   |XXXXXXXXXXXXXXXX| n |                   |
|   |XXXXXXXXXXXXXXXX|   |                   |
|   +----------------+   |                   |
|     bottom margin      |                   |
+------------------------+                   |
|                                            |
+--------------------------------------------+

so between the actual image (on the left) and the text (on the right) is the … image’s right-margin.

[Notorion]

Ohhh!!!

Damn, that's awesome. Didn't really think of it that way even though I knew what a margin was.
Thanks, u guys r awesome! I'm sure I'll have another question in a few hours. Gotta get this done by weekend.

[Dormilich]

more insight you’ll find when you google for "CSS box model".

[Notorion]

Hey, to those of you who have read / helped this earlier post.
I decided to continue this thread as it is pretty much related, just a little more advanced (at least seems like it to me).



So, how would you do that? I have 3 clickable sections (good with the links and php on how to do it), but my difficulties are learning how to properly setup the html and css to make it look like this.

Would I make a div for each 3 then have a 20px margin-right on the 3 individual divs? (or just the first 2)
Yes, spacing between them is 20px, but that is just by design.

Oh, with each section (possibly use divs to create this?) there will be a header of some size, and the picture below it. Pictures are 270 x 170 px.
So, given that does this mean I float the header center, and then the image will go below?

sample code:

<div id="section1" class="sectionImage">
			<h3>Construction</h3>
			<img border="0" src="images/section1.jpg" alt="Section1" width="270" height="170"></img>
		</div>

This post has been edited by Notorion: 28 November 2012 - 10:36 AM

[Dormilich]

yepp, something along that. though I would leave out the </img>, that is only valid in real XHTML.