26421

Positioning elements within a page in Drupal 7

Question:

I've got a set of divs in my page with some images inside of them. I would like them to be arranged horizontally instead of vertically ie:

X X X X X X X X X X

Instead of

X X X ... X

I've tried using the float, position:absolute properties but when using them the elements are "unattached" from the normal flow of the document and positioned outwith the content area.

What is the best way to position elements in such a way without altering the normal flow of the document?

<strong>Edit</strong>:

<div id="content" class="column"><div class="section"> <h6 id="choose">CHOOSE WHAT YOUR PLANB IS</h6> <div class="region region-content"> <div class="canvas-wrapper"> <div class="canvas-triangle" id="one"> <canvas id="one"></canvas> </div> <div class="triangle-caption">One</div> </div> <div class="canvas-wrapper"> <div class="canvas-triangle" id="two"> <canvas id="two"></canvas> </div> <div class="triangle-caption">Two</div> </div> //ANOTHER 8 LIKE THAT </div> </div>

That's the code I have that creates the divs with the images in them. What I would like to do is arrange them as indicated above. Let me know if you need any more details.

Thanks

Answer1:

You don't need to use position, just use float:left for the divs you want in a row. Than you can use some element with clear:left under those divs, so the divs will not overlay this element or any other element further in the code...

<strong>edit:</strong>

To understand it, try this code with and without clear:

#wrap {width: 500px; background:#ffa;} div.row {float:left; width:150px; height:150px; background:#aff} div.right {float:right; height:250px;} div.clear {clear:left; width: 250px; background:#faf} <div id="wrap"> <div class="row">

div

</div> <div class="row">

div

</div> <div class="row">

div

</div> <div class="row">

div

</div> <div class="row right">

right

</div> <div class="clear">

clear

</div>

Lorem ipsum dolor sit......

</div>

Also notice the difference if you use clear with value left or both in this case.

Answer2:

Get rid of the absolute positioning. You should give us something more to play with if that's not enough help.

EDIT: See this jsfiddle and let me know what's not clear: <a href="http://jsfiddle.net/FH7cg/" rel="nofollow">http://jsfiddle.net/FH7cg/</a>.

Recommend

  • Unity: Conditional resolving
  • Icon's priority on action bar (keeping order of items)
  • Python : Find tuples from a list of tuples having duplicate data in the 0th element(of the tuple)
  • Position absolute prevents browser to calculate correct height. Is it possible to fix this issue
  • Verify if a service is marked for deletion
  • float:left paragraph followed by float:none paragraph
  • Disadvantages to high make job values
  • How to use Eclipse Mars to connect to Subversion
  • i can't add #region to .ashx in visual studio 2010
  • C++ std::set comparator
  • JQuery Add class to certain list item
  • Change border corlor of NSTableView
  • Download/Save/Write a file on the client's hard disk using flash/flex
  • Catching exception and throwing the same?
  • How do I change the kernel/python version for iPython?
  • SIP API media codecs
  • SyntaxError: (irb):26: both block arg and actual block given
  • How do I display a dialog that asks the user multi-choice questıon using tkInter?
  • AndEngine Applying Transparancy to AndEngine View
  • Scrapy recursive link crawler
  • FileReader+canvas image loading problem
  • How to rebase a series of branches?
  • Insert into database using onclick function
  • Projection media query: browser support and workarounds?
  • Deselecting radio buttons while keeping the View Model in synch
  • Fetching methods from BroadcastReceiver to update UI
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Symfony2: How to get request parameter
  • GridView Sorting works once only
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • WPF Applying a trigger on binding failure
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How to stop GridView from loading again when I press back button?
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal