Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

floating div with background image

Posted on 2009-06-29
10
Medium Priority
?
478 Views
Last Modified: 2012-05-07
hi there; what i would like to do is have a div (A) that expands the entire width of the browser window. simple enough.

inside that i need 2 side by side divs (B and C) that are centered in div A.

div B will have a background image 48x48px and div C is text that should be vertically aligned to div B (i.e. the text is one line and should start in the middle of div B (around 24px down)).

hope that's clear.  thanks.
sidebyside.jpg
0
Comment
Question by:vbnewbie01
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24740419
Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ABC</title>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
}
.div-A {
	width:100%;
	background:#000;
}
.container {
	width:200px;
	margin-left:auto;
	margin-right:auto;
}
.div-B {
	float:left;
	width:100px;
	height:100px;
	background:#00C url(yourbackground.jpg) no-repeat left top;
}
.div-C {
	float:right;
	width:100px;
	height:100px;
	background:#900;
}
.text {
	margin-top:36px;
	padding:0px;
	text-align:center;
}
.clear {
	clear:both;
}
</style>
</head>
<body>
<div class="div-A">
  <div class="container">
    <div class="div-B">This is B</div>
    <div class="div-C">
      <div class="text">This is your text</div>
    </div>
  </div>
  <div class="clear"></div>
</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:vbnewbie01
ID: 24740486
hi there; thanks for the response ... however, the only issue i see with your suggestion is:

.container {
      width:200px;
      margin-left:auto;
      margin-right:auto;


as there can't be a fixed with on it as the text is dynamic.  unfortunately, width set to 100% left justifies the div B and div C.

0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 24740621
hm ill try something else, but that div container needs a fixed width to center it and div-B and div-C they depend on their parent div, so what happens if the container has a width 100% the divs are floating at the right and left of the screen but not centered.
Don't you have live website somewhere as an example? So that i have a better view of what you are trying to achieve. And what you are trying to do is pretty tricky with div classes.
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.

 
LVL 1

Author Comment

by:vbnewbie01
ID: 24740794
nothing up yet ... but maybe this revised image will help.  do i need to use a table to achieve this since the width of div C is dynamic (i.e could be 500px, might be 800+ etc.)
sidebyside2.jpg
0
 
LVL 6

Expert Comment

by:Fero45
ID: 24741420
This is an unusual question. I would you a simple PHP script that would dynamically change the width of C divi

I used your code to test it. It looks like a ten-letter string of words is about 100px. You pass the variable $myString and multiply it by 10. It will resize the div box and justify it at the right leaving a gap between B and C. If this is what you want, try :
<?
$myString = '012345';
$pixel_length = strlen($myString) * 10;
 
echo "<style>
.div-C {
        float:right;
	width: {$pixel_length}px;
        height:100px;
        background:yellow;
}
 
</style>";
?>

Open in new window

0
 
LVL 1

Author Comment

by:vbnewbie01
ID: 24741610
Not a php guy, but thanks for trying Fero45.  i think i'm just going to have to use a table in this situation.  
0
 
LVL 4

Expert Comment

by:wilson1000
ID: 24743378
This is incorrect authoring, tables were never created to use for layout and will give you much the same effect as a group of divisions. You should layout with CSS as the correct use of tables are meant for tabular data:

http://webdesign.about.com/od/tables/a/aa122605.htm

Food for thought

How will you handle word-wrap? The reason I ask is that as far as i can see, you can't increase the size of a container dynamically (unless utilising dynamic code (above)) because words will wrap at their break point.

Are you suggesting that some of your copy words may be 80 characters in length?

Kind regards
0
 
LVL 1

Author Comment

by:vbnewbie01
ID: 24747202
hi, wilson1000; i'm open for suggestions ... after all, that's why i'm here (=

i would prefer not to use a table, however, it does accomplish exactly what i need so unless someone is able to assist me with a css solution, then a table it is.

again, just to be clear, i currently have an image in one cell and a line of text in the other. the text is dynamic in length so it's cell stretches to fit.

the table is centered on the page so, together, the image with text are always centered regardless of the length of the text.

hope that's clear.  
0
 
LVL 4

Expert Comment

by:wilson1000
ID: 24763921
You can adjust word-wrap on the container that holds your text.

white-space:nowrap;


0
 
LVL 4

Accepted Solution

by:
wilson1000 earned 300 total points
ID: 24763936
sorry, on your class : .text

... add the CSS property and value above
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

704 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