CODEWITHSUNDEEP
htmlcssxhtml
AndreaNobili
AndreaNobili

Reputation: 42997

How can I show this 2 div side by side?

Into a page I have the following 

<div id="submitEventButtonDiv">
    <div id="wwctrl_backButton" align="right">
        <input id="backButton" type="submit" onclick="return clickSubmitButton();" value="Back">
    </div>

    <div id="wwctrl_submitEventButton" align="right">
        <input id="submitEventButton" type="submit" onclick="return clickSubmitButton();" value="Submit">
    </div>
</div>

As you can see there is an external div having id="submitEventButtonDiv" that contains 2 divs containing in turn 2 input fields.

Obviously when the 2 input field are displayed appear one below the other (because they are contained into a div that is block element).

How can I display one beside the other? (I can't delete the div that contains each input field because it is automatically rendered by a tag library that I am using, this that I have post is the rendered HTML obtained from a page that us Struts 2 tag library that wrap HTML following its logic, so in this case I can only work on CSS to do it)

Tnx

Upvotes: 0

Views: 371

Answers (5)

U r s u s
U r s u s

Reputation: 6978

This generates the desired effect.

#submitEventButtonDiv > div {
display:inline;
float:right;
}

Upvotes: 0

GMG
GMG

Reputation: 31

If the inner div IDs are always same, then you can add the following styles in your css: 

div#wwctrl_backButton {
 display: inline-block;
 width: 50%;
}
div#wwctrl_submitEventButton{
 display: inline-block;
 width: 50%;
}

Upvotes: 0

Little Red Diesel
Little Red Diesel

Reputation: 1

If you float them both they'll be positioned next to each other. Adding 

#submitEventButtonDiv > div {
    float:left;  
    display:inline;  
}

To your css should position them both to the left of the page next to eachother.

Upvotes: 0

Justin Breiland
Justin Breiland

Reputation: 460

Just display the child elements inline.

#submitEventButtonDiv > div {
display:inline;
}

codepen here http://codepen.io/anon/pen/jEmaed

Upvotes: 1

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175017

Depending on your cross browser needs, use flexbox:

#submitEventButtonDiv {
    display: flex;
}

Will make all of the children flex items, which by default, stack horizontally, like you want.

Upvotes: 1

Related Questions