How to align the div element to different size ?

Question

0.00/5 (No votes)

See more:

Hello friends

How to align the div element to different size ? Ex: I want to display Image,login details,some content all in single row,guide me how to align the div ? in css what should I use either % or px or em ?

Thanks

Posted 27-Aug-14 21:16pm

vikyas26

Add a Solution

Comments

vangapally Naveen Kumar 28-Aug-14 3:18am

please elaborate more..........

vikyas26 28-Aug-14 4:34am

I am using <div> tags in my project, this is new to me because I used <table> only before so by using <div> I want to know how to divide the <div> to particular size I used width=100% also but still its not coming correctly,give me the solution.

ChintanShukla 28-Aug-14 4:16am

Use table instead of div even if you are keen to use div use position and width attribute in css also make sure that all the content sum up to 100%

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

SteveyJDay · Answer 1 · 2014-08-28T03:49:00

Solution 1

Is this what you are thinking?

Note divs one, two, three need to be right after each other otherwise you will get a funny spacing(div three will drop to a new row).

HTML

<div style="width:480px; border:1px solid purple; ">
    <div style="width:40%; display:inline-block;">First</div><div style="width:20%; display:inline-block;">Second</div><div style="width:40%; display:inline-block;">Third</div>
</div>

Posted 28-Aug-14 3:49am

SteveyJDay

v2

Comments

vikyas26 29-Aug-14 12:46pm

yes, I got your answer jared,is <div> is best way to design or <table> is best way for respondive designs ? let me know shall I use Bootstrap method or shall I write my own responsive css code ?

SteveyJDay 29-Aug-14 13:57pm

<div> are preferred for responsive design. <table> are for displaying tabular data such as football standings or the results of a race. Not for laying out a website.

Using Bootstrap is up to you. You can accomplish the same look and feel with or without bootstrap. CSS Media queries are the driving force between responsive design. The Bootstrap developers have complied these media queries.