fluid grid 2 divs

I Dreamweaver cs6I have a fluid Grid with an image in a grid area.
Now I have an image and I also want text to always appear on right side of the image in same grid .

How can I get this to happen in a grid in Dreamweaver?Currently I need to place txt and img in separate grid cells if I want txt to always appear on right side of text.

   <div class="imgTxtGrid">
     
        <div class="img"><img src="images/apollo_bay.jpg" alt="haunted" /></div>
        <div class="txt">asdasdasd</div>
     </div>
jagguyAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Here is a test with some modified code above.  http://jsbin.com/ekoqif/1/  Where you see HTML click that to view the html I coded.  You can paste the code directly to your dreamweaver.  

The only change you will want to make is where you see the style sheet

<link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" />

change that to the blueprint css file that is inside of a folder on your local site.   If you get an error in dreamweaver similar to, "the file is outside of dreamweaver"  then make sure the css file is in your site.   You should be able to see it when in dreamweaver you select Window then Files.  Look on the "Local" side.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
For your specific question add this to your css style sheet

div.imgTxtGrid div {
      float: left;
      width: 50%;
}

Or in the head section of your page add inside of the style tags

<style type="text/css">
div.imgTxtGrid div {
      float: left;
      width: 50%;
}
</style>

Just some advice... I would avoid using dreamweaver's templates.  They get confusing and can end up tripping you up.    There are other grid systems that make much more sense once you get into it.  There are many, but one of the more simple grid systems is http://www.blueprintcss.org/.  http://www.blueprintcss.org/tests/parts/sample.html
0
 
jagguyAuthor Commented:
Hang on, the templates dont work?

Or do you mean templates for fluid grid's dont work? how bad is it?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I mean when you try and use dreamweaver's templates as your base, you will find trouble.  They "work".  But from personal experience and answering questions here, they cause trouble.  Of course, you just paid some good money for DW and it may be  hard to comprehend, believe me later, use a frame work like blueprint.org or 960.gs or a lot of other grid systems out there.  For starting out, I like to suggest blueprint because it is bare bones and just works.

Let's say you want a layout with a header taking up the full width, 3 columns under the header and a footer taking up the full width.

Your base  layout would be something like below if you are using blueprint's css
<div id="container" class="span-24">
     <div id="header" class="span-24 last">
           <div class="span-12"><img src="mylogo.jpg"></div><div class="span-12">MyName<br>Myadddress<br>MyCity St zip</div>
     </div>
    <div class="span-5">col 1 narrow</div>
    <div class="span-10">Middle main</div>
     <div class="span-8">left col wider then right col</div>

    <div id="footer" class="span-24 last">This is my footer</div>

</div>

Open in new window


Works in every browser.  You can use a fixed or fluid.  That took me 1 minute to layout from there, it is just your own  images and content and additional css to snazz it up.

There are a lot of good things in using dreamweaver, the ready made templets are not one of them.  Of course, I only have cs 5.5 and in past used dw mx and dw 4. I dont' think I would upgrade again and like using sublime text editor and if I did buy something else, would probably be coda.
0
 
jagguyAuthor Commented:
I will start a new thread for blueprint but the templates I have used have worked.
Now if they dont work in DW then in what case is this so? I have used fluid grid template ok so far for a mobile size.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Just go through the demo on the site.  Please look at 960.gs too.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.