Solved

CSS layout

Posted on 2010-08-26
9
181 Views
Last Modified: 2012-05-10
I would like to create a div tags horizontally without the tables  , but i find that if i create a table first and put the div tag in it,it allows me to place the image or text neatly,  what do any one suggest?

0
Comment
Question by:imagekrazy
  • 4
  • 4
9 Comments
 
LVL 9

Accepted Solution

by:
Snarfles earned 500 total points
Comment Utility
div is a block element which means that it expands across the entire page. In lay mans terms that means you can't have more than one in a row. What you can use instead is the span tag which is only slightly different but allows you to have more than one per row.
0
 
LVL 9

Expert Comment

by:Snarfles
Comment Utility
You can make a div not block by using some css code.
#yourdivID {

display:inline;

}

Open in new window

0
 

Author Comment

by:imagekrazy
Comment Utility
okay, but i created a gallery,I attached my code but everything is on the left, i want the left to be the same as the right side  and the whole thing being centered.



 
 
layout.html
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
try using float property
eg
div.leftDiv
{
   float: left;
}

div.rightDiv
{
   float: right;
}

<div>
   <div class='leftDiv'>A left div</div>
   <div class='rightDiv'>A right div</div>
</div>
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:imagekrazy
Comment Utility
thanks, final question, how do   i get the right side div  to move a little away from the the sidebar1 div tag that i made, i am attaching my code, i tried everything
thanks
layout2.html
0
 
LVL 9

Expert Comment

by:Snarfles
Comment Utility
with

.thrColLiqHdr #sidebar1 {

add

margin-right:15px;
0
 

Author Comment

by:imagekrazy
Comment Utility
I tried that , it didn't work, and i meant the left side , side bar1
0
 
LVL 9

Expert Comment

by:Snarfles
Comment Utility
Not sure that I understand what you mean then. Could you explain further or provide an image mockup of what you are after?
0
 

Author Comment

by:imagekrazy
Comment Utility
I am attaching a snap shot in my word doc, my problem is nothing is uniform, if i try to move something over it moves one of the div tags to the right or to the bottom of the page, and i tried to add another  div tag in the first row and that div box moves to the bottom
thank you for your help
layout.docx
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Menu Inconsistent 3 18
Change month dropdown 5 15
Problem to page 4 16
increase words that display in widget 6 11
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

772 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now