Css newbie

Ok, I'm not the greatest at picking stuff up just be reading it from a tutorial. Is there anyway someone can explain to me how to get a div to look like the following layout:


<Image> ------------------------ Company Name
--------------------------------- Description

minus the lines just did that for formating

I'm trying to get it to fit into one div but I don't think that is going to work. Any ideas.

p.s. My boss won't let me use tables.

 

Good! Something like this...:

<div class="company">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="276" height="110"  />
Company Name <br />Description
</div>

Code (markup):

With the following CSS applied to it:

.company {
	background:#CCC; /*If you want a background for the overall DIV*/
	text-align:right; /*Shove the text to the right*/
	overflow:auto; /*So the DIV wraps around the floats within the DIV(the image)*/
}
.company img {
	float:left;
}	

Code (markup):

Obviously replace the image with a link to your image, and change the width and height attributes.

But it could take a variety of forms (there are endless ways), this is just one of them. For example you could use the image as a background image for the DIV. Is the image their for presentation purposes? If so use it as a background image. If the image is there as part of content, then fair enough keep it in the markup.
Also you might want to shove a span around either the company name, or description if you wanted them to appear in different ways.

For more information on the containing floats as described in the CSS see here

 

Yeah I need to click the image to go to the company website. Thanks a lot though appreciate the help. Mostly I need help with getting the company name to show above the description

Company Name
blah blah blah blah blah blah
blah blah blah blah blah blah

 

Yeah you can just shove the <a> around the image and it will still work as expected.

You could even do something like this if you wanted the text to link to the same page, and it was your site title:

<h1><a href="#">Company Name <br />Description</a></h1>

With CSS:
h1 a { 
	display:block;
	background:#CCC url('http://www.google.co.uk/intl/en_uk/images/logo.gif') no-repeat;
	text-align:right;
	height:110px; /*Height of background image*/
}

Code (markup):

That wouldn't even use a DIV.

 

I can't seem to get it to work properly. The picture is there and it's to high up on the div and the text looks aweful like this

<image>-----------------------------------------------------Company Name words words words
-----------------------------------------------------------------------------------------words

After the div ends because it is align right everything goes right.

 

#formcontentblue1 { background:#000066; /*If you want a background for the overall DIV*/
text-align:center; /*Shove the text to the right*/
overflow:auto; /*So the DIV wraps around the floats within the DIV(the image)*/
padding:5px;


}

img.floatLeft {
float: left;
vertical-align:middle;


}


<div id = "formcontentblue1"><img src = "images/flower.jpeg" width "50" height = "50" /><%=qtest2("sVendorName")%>
<%=qtest2("sVendorTypeDesc")%></div>

what am I doing wrong nothing is working for me?

 

Whatever that was you posted, it's not HTML (likely your back-end language you're using?). But anyways...

maybe what you want is another container.

<div id="formcontentblue1">
<img src="blah" alt="blah">
<div>
<h?>Company name</h?> <-- some level header, not h1
<p>blah blah blah blah. Blah blah blah blah</p>
</div>
</div>

If you need to give any of these boxes names, fine.

#formcontentblue1 {
whatever width you want for the whole thing;
anything else;
possibly float enclosing, see below;
}
#formcontentblue1 img {
float it left as before...;
}
#formcontentblue1 div {
this is the inner div who holds the header and text... yeah I think that's prolly a header I just dunno what level;
float: right;
set a width!
anything else;
}

you should end up with a box, with the image on the left and another box on the right holding the h? (? replaces a number) header and the text. This way you don't need to have text-align affecting it, you've just packaged it and floated the whole thing right.
By floating both, they both stay at the top-- SO long as your main div ("formcontentblue1") is wide enough! If the inner div is sitting under the image, they're too wide or the formcontentblue1 div is too narrow!

Second, if the formcontentblue1 div needs to be visible (has a border, a background) then you'll need it to enclose those floats (normally it won't).

Usually I put overflow: hidden on the container div, but there are other ways to do it and overflow has a Day Job so sometimes it's unsuitable.
You can read about enclosing floats here: http://gtwebdev.com/workshop/floats/enclosing-floats.php


As wd said, there are several different possible ways to do this.

Next time you post HTML code, look at your page in your browser and do a View>Source and post that. That will be pure HTML and not that strange back-end language thing you've got going on. I can read HTML but not whatever that is, ASP? : )
}

 

Hi,

When you say "The picture is too high up" , you can move the picture down my using a margin-top: 20px, changing the 20px to the value you want to move it down by. Vertical-Align does not work here, but the same effect can be achieved by using margins.

When you say "The text looks awful" you can seperate the text using line-breaks (<br />), or put a<span> around individual pieces of text you want to style differently. Add a <br /> after the Company name, and the company description will appear underneath it. Like:

<div id = "formcontentblue1"><img src = "images/flower.jpeg" width "50" height = "50" /><%=qtest2("sVendorName")%>[B]<br />[/B]
<%=qtest2("sVendorTypeDesc")%></div>

Code (markup):

You also have forgot to add the "=" sign after your width statement. Also try not to add spaces after everything like between atributtes and equals signs, this might not cause a problem but it's common to not use spaces like height = "50" should be height="50". Overall your HTML should be like this:

<div id="formcontentblue1">
  <img src="images/flower.jpeg" width[B]=[/B]"50" height="50" />
  <%=qtest2("sVendorName")%>[B]<br />[/B]
  <%=qtest2("sVendorTypeDesc")%>
</div>

Code (markup):

Because you are not being specific enough I can't give you an exact answer, maybe you can provide a small visual image (just draw some boxes) of what you are tyring to achieve, and post the exact code of what you are currently achieving.

EDIT: Poes got there before me i'd use his method over mine, he knows a lot more and btw <% is asp I think it's just like a simple echo

 

Either way could work! You know you're in trouble if you're using more than one <br> but just one can be fine in context.
and actually, if the OP used a header and a p, there would be a natural break anyway. I mean, it depends on the content but it looks like it should be a header and a paragraph.

note on my above code: I write HTML4, so note I don't have XHTML closings.

 

I got something nice done up now. I appreciate the help fellas. It was asp by the way I have the company name, description, img, and website coming in through a database. And I'm just using the value.