CODEWITHSUNDEEP
htmlcssalignment
Kanishka Gupta
Kanishka Gupta

Reputation: 217

alignment issue inside div

I am facing problem while aligning the element inside div.

I want something like this

|-----------------------------------------------|
|<P>   | <input type = text> | imagebutton here |
|here  |  here               |                  |
|-----------------------------------------------|

But i am getting something like

|-----------------------------------------------|
|<P>   |                                        |
|here  |                                        |
|       <input type = text>  |                  |
|        here                |                  |
|                             imagebutton here  |
|-----------------------------------------------|

So there is some issue that make next element in div to be displayed below the current element, i.e if i can align <input> horizontally to the <p>, i think that will give the solution.

Below is my attempt:

css part

.imagewrapper{
    display: table-cell;
    background-color:yellow;
    margin-left: 70%;
    width: 25%;
    margin-bottom: 10%;
    height: 35%;
}
.textwrapper{
    display: table-cell;
    background-color:blue;
    margin-left: 30%;
    width: 40%;
    margin-bottom: 10%;
    height: 35%;
}

.msg_wrapper{
    display: table-cell;
    background-color:lime;
    margin-left:5%;
    width: 25%;
    margin-bottom: 10%;
}

html side

<div id="searchClass">
<p class="msg_wrapper"><b>Class</b></p>
<input id="txt_class"   style="background-color: Aqua; class = textwrapper >
<input type="image" id="searchclassimg" class="imagewrapper" src="./resource/search-button.png">
</div>

Upvotes: 0

Views: 140

Answers (3)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

Hey take a took at this example.

enter image description here

<html>
 <head>
  <title></title>
  <style type="text/css">        
   #tablecellexamples div { border:1px solid black; width:130px; background-color:#eee }
  </style>
 </head>
 <body>
  <div id="tablecellexamples">          
   <div style="display:table-row">   
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus dignissim ipsum a dignissim. Proin mattis orci sit amet quam feugiat lobortis.
    </div>
    <div style="display:table-cell; vertical-align:top">Top aligned</div>
    <div style="display:table-cell; vertical-align:middle">Center aligned</div>
    <div style="display:table-cell; vertical-align:bottom">Bottom aligned</div>
   </div>
  </div>
 </body>
</html>

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this html :

        <div id="searchClass">
          <p class="msg_wrapper"><b>Class</b></p>
          <input style="background-color: Aqua; width:25%; float:left; margin:0 0 0 1%; class = textwrapper" id="txt_class">
          <input type="image" id="searchclassimg" class="imagewrapper" src="./resource/search-button.png">
        </div>

OR CSs code below :

<style>    
    .imagewrapper {
        display: table-cell;
        background-color: yellow;
        margin-left: 1%;
        width: 25%;
        margin-bottom: 10%;
        height: 35%;
    }
    .textwrapper {
        display: table-cell;
        background-color: blue;
        margin-left: 30%;
        width: 40%;
        margin-bottom: 10%;
        height: 35%;
        float: left;
    }
    .msg_wrapper {
        display: table-cell;
        background-color: lime;
        margin-left: 5%;
        width: 25%;
        margin-bottom: 10%;
        float: left;
    }
</style>

Upvotes: 5

Andy G
Andy G

Reputation: 19367

Your HTML is incorrect (missing a closing quote) corrected in this line:

<input id="txt_class" class="textwrapper">

you should add the Aqua colour using your css-rules, replacing Blue.

You can make the wrapper div behave as the (containing) row:

#searchClass {
    display: table-row;
}

You will then want to adjust your margins.

Personally, I would remove all the margin, height, etc., settings and see how it looks firstly, without these.

Upvotes: 0

Related Questions