I have a DIV element:
<div style="background-color:red">This is a test
<label>ID:</label>
<asp:TextBox runat="server"><asp:Textbox>
</div>
I need to show "This is a test" on left side but the Label and Textbox on the right side of the side.
I tried
margin:right 0px;
but this did not help.
Also tried Float:right but this created strange results.
Add a div to wrap the label and input, and use float:
.input-group {
float: right;
}
<div style="background-color:red">This is a test
<div class="input-group">
<label>ID:</label>
<input type="text" />
</div>
</div>
You can try using float:right; in your style:
<div style="background-color:red">This is a test
<div style="float:right">
<label>ID:</label>
<asp:TextBox runat="server"><asp:Textbox>
</div>
</div>
Related
What I need to do is a bit complicated to explain, but I'll do my best. I need to fit 3 different divs in one page, but my left div needs to have more space than the others, so aligning side by side is impractical, as is one on top of each other. I need one bigger div on the left, and the other two stacked on top of each other on the right. But I can't merge these two divs into one and float it. Because I need the top one to be vertically aligned on top of the left one, and the bottom one vertically aligned on bottom of the left one, while these 2 (top and bottom) need to be aligned on their right. Not sure if I was able to explain, so here is an image illustrating what I want to accomplish:
So, you see, left one taking most of the space, smaller ones aligned on top and bottom, while also aligned on their right side, and a blank space between then. Here's the code I already have:
<div style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
<h3>Bottom right div</h3>
<input type="text" name="name3">
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
I'd also like to say that in the middle of the way (when I only had 2 divs) it was working the way I wanted to, the problem arose when I added the third div, so I think that's where the problem is at. Please note that I'm new to html, I'm sorry if this is just a simple fix.
I think the key is the equal height part, which you can use CSS3 flexbox to solve it. For the right side top / bottom divs, you can wrap the two divs into another div. See the simple demo below.
jsFiddle
div {
border: 1px solid aqua;
}
.container {
display: flex;
}
.left, .right {
flex: 1;
}
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="container">
<div class="left">
<h3>Left Div</h3>
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="right">
<div>
<h3>Top right div</h3>
</div>
<div>
<h3>Bottom right div</h3>
</div>
</div>
</div>
this is just the way you want it to be.... as the images..
<html>
<head>
<style>
#i{
background-color:"red";
width:700px;
height:600px;
float:left;
}
#a{
background-color:"black";
width:600px;
height:300px;
float:right;
position:relative;
display:inline;
}
#b{
background-color:"blue";
width:600px;
height:250px;
float:right;
margin-top:50px;
position:relative;
display:inline;
}
</style>
</head>
<body>
<div id = "i">
<p>hello</p>
</div>
<div id = "a">
<p>hello</p>
</div>
<div id = "b">
<p>hello</p>
</div>
</body>
</html>
One way is to use negative margin. The inline-block element is what's making it difficult to have multiple divs on the same vertical axis, because both are lining up with the larger div. This works for what you're asking:
<div id = "left" style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>
<div id = "top-right" style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>
<div id = "bottom-right" style="display: inline-block; vertical-align: bottom; margin-left: -182px">
<h3>Bottom right div</h3>
<input type="text" name="name3" >
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>
fiddle: https://jsfiddle.net/an9ra3mb/2/
I'm styling an input group <div> wrapper as display:table; with all contents display:table-cell; When I want to have a fixed width on the table, if the cell I want to widen/shorten to take up the remainder width is a <span> element or a <ul> element, for example, then setting width:100%; works. However, if the element is an <input> or <button> then this does not work in firefox or chrome (but does in IE) and the result is the element takes up the entire space of the input group, pushing the next element down to a new row. I can get around this by putting the <input> or <button> inside a <span> element and setting width:100%; on both, but I'd rather have a css solution.
<div class="input-group wide">
<input type="text" style="width:100%;"></input>
<button>S</button>
</div>
css:
.input-group {
display:inline-table;
padding:0px;
background-color: grey;
}
.input-group > input, .input-group > button, .input-group > span, .input-group > ul {
display: table-cell;
margin:0px;
}
.wide {
width: 260px;
}
http://jsfiddle.net/5v3Lg50d/3/
Floats are good idea, you can follow Epik's solution.
I checked one thing with Firebug for Firefox and I learned that <button> works fine with its parent div having style="display: inline-flex".
You might want to check this against other browsers and use it conditionally, or go with floats instead.
I have a JS fiddle here with the changes made.
http://jsfiddle.net/5v3Lg50d/4/
Basically i changed a few small things and tidied up your fiddle. The elements you wanted full width i added in a class and floated left;
.fullWidth {
width:100%;
display:inline-block;
float:left;
}
The following is the code i amended:
<div class="input-group wide" style="">
<span class="fullWidth">space</span>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
<ul class="fullWidth"><li>o1</li><li>o2</li></ul>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
<input type="text" class="fullWidth"></input>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide">
<span><input class="fullWidth"></input></span>
<button class="fullWidth">S</button>
</div>
<br />
<br />
<div class="input-group wide">
<button class="fullWidth">A button</button>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
<span><button class="fullWidth">A button</button></span>
<button>S</button>
</div>
Hope this helps.
-Epik
In the following code, I need the div elements #ldiv and #rdiv to be placed next to each other.
So I am using the CSS float property. I looked up this answer, and I think I am following it, but still the div's won't position next to each other. The second div displays in the next line.
Then I thought that div is a block level element, so I replaced the div by span elements. But that did not help either.
JSFiddle here.
<div style="padding:25px; width:400px;">
<div style="background-color:#bf5b5b;">
<span>Yes</span>
<span>No</span></div>
<div id="option_one_div">
<div id="ldiv" style="float:left; background-color:#74d4dd; width:150px;">
<label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/></label>
<label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/></label>
</div>
<div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
<span>Label of first group of Radio Buttons radio buttons.</span>
</div>
</div>
</div>
In your situation you can use display:table in container(#option_one_div) in your example and display:table-cell in children elements(#ldiv, #rdiv) like this:
<div style="padding:25px; width:400px;">
<div style="background-color:#bf5b5b;">
<span>Yes</span>
<span>No</span></div>
<div id="option_one_div" style="display: table;">
<div id="ldiv" style="background-color:#74d4dd; width:150px;display:table-cell;">
<label for="rbutton_radio_1_0" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_0" type="radio" name="radio" value="0"/></label>
<label for="rbutton_radio_1_1" style="margin-left:30px; margin-right:30px;">
<input for="rbutton_radio_1_1" type="radio" name="radio" value="1"/></label>
</div>
<div id="rdiv" style="display:table-cell; background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
<span>Label of first group of Radio Buttons radio buttons.</span>
</div>
</div>
</div>
fiddle
As you can see you don't need floats.
use width with float in div
<div id="rdiv" style="float:right; background-color: #74d4dd; /* margin-left: 151px; */ padding-left: 20px; width: 210px;padding-right: 20px">
<span>Label of first group of Radio Buttons radio buttons.</span>
</div>
plz check
the total width of the elements (incl. margin/border) can not be greater than the surrounding divs width of 400px else the floating elements will be put into the next line ... see akz's answer for a quick fix
Just remove float:right. It will work.
<div id="rdiv" style="background-color:#74d4dd; margin-left:151px; padding-left: 20px; padding-right: 20px">
DEMO
the main problem is you didn't add width to the id="rdiv" and used margin-left:151px
when you use some element with float, you have to add its width
<div>
<div style="float: left;width: 110px;height: 90px;margin: 5px;">a</div>
<div style="float: left;width: 110px;height: 90px;margin: 5px;">b</div>
<div style="float: left;width: 110px;height: 90px;margin: 5px;">c</div>
</div>
to solve the problem, you can do one of the following things:
1: change your code to:(notice you set margin-left:151px; in th id="rdiv" and I changed it to lower value)
<div id="rdiv" style="float:right; background-color:#74d4dd; margin-left:15px; padding-left: 20px; padding-right: 20px; width:50px;">
2: remove your float=right in the id="rdiv" so the id="ldiv" could be in the float version of this element
I have the following HTML:
<fieldset>
<legend>Details</legend>
<div class="form-section first">
<div class="abc">
<div class="editor-label">
<label for .../>
</div>
<div class="editor-field">
<input type="text" ... />
</div>
</div>
<div class="def">
...
</div>
<div class="ghi">
...
</div>
</div>
<div class="form-section">
</div>
<div class="form-section last">
</div>
</fieldset>
I have a fieldset that is wrapping all of my form elements. The fieldset contains multiple form sections, which basically hold one "row" of content. The divs in the form sections I want to float to the left:
||||||| ||||||| ||||||| <-- first form section, 3 floated elements
||||||| ||||||||||| <-- second form section, 2 floated elements
What is the proper way to float these elements so that:
1) The second form section occurs on its own line.
2) The second form section can apply a top margin.
I can't seem to get it right. I need the solution to work in IE7. I tried putting a clear: both on the form-section element but it didn't seem to work right. All 5 elements occurred on the same line instead of 2 separate lines.
** EDIT **
I can somewhat get this to work. My issue is the following:
When I float the elements within a container, they essentially have 0 height. This messes up any containers that come after it if they want to apply a top margin.
for the row of three try:
<div style="clear:both; width:100%;">
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: right;"></div>
</div>
<div style="clear:both; width:100%; height:10px;"></div>
<div style="clear:both; width:100%;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
That should get you the desired output.
<fieldset>
<legend>Details</legend>
<div id="section 1">
<span style="height: 500px;">1</span>
<span style="height: 500px;">2</span>
<span style="height: 500px;">3</span>
</div>
<div id="section 2" style="margin-top: 50px;">
<span>4</span>
<span>5</span>
</div>
</fieldset>
All,
I have the following code:
http://jsfiddle.net/k2AMG/7/
I am trying to avoid fixed widths in the CSS and align the divs in this fashion, but am not able to do so:
Your name Textbox
Please check the name
Work email Textbox
Email should have a valid format
Job title Textbox
Job title should have only alphabets
Any help is appreciated. Thanks
Try it like this:
http://jsfiddle.net/andresilich/k2AMG/11/
::Edit:: fixed demo
::Edit 2:: added CSS and HTML to post for future reference
CSS
.data_item{
margin-bottom: 20px;
display: block;
}
label
{
width: 100px;
display:inline-block;
}
.left {
display:inline-block;
margin-right:5px;
}
.right {
display:inline-block;
vertical-align:top;
}
.right span span {
display:list-item;
list-style-type:none;
}
Clarification: created two classes to separate the two sides, .left and .right, and added a style to the span of the .instructions div to display as a list-item (so they can displace like a regular html list would, why? Because it is a clean, responsive drop that displaces naturally without the need to add margin or padding that might displace with any other element around and thus less maintenance.).
HTML
<div class="data_item">
<div class="left">
<label> Your name </label>
</div>
<div class="right">
<span>
<input type="text" />
<span class="instructions">Please check the name</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Work email </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Email should have a valid format</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Job title </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Job title should have only alphabets</span>
</span>
</div>
</div>
Try this: http://jsfiddle.net/k2AMG/9/