Code:
<div id="divPopUp" style="border: 2px solid gray; padding: 20px; width: 700px; background: white; height: 450px; ">
<h1 style="text-align:center">Handsets</h1>
<table>
some table content
</table>
<div class="footerButtons" style="display: block;">
<div style="float: left;">
<input type="button"/>
</div>
<div style="float: left; margin-left: 207px;">
<input type="button"/> <input type="button"/>
</div>
</div>
</div>
I need to put div with class "footerButtons" to bottom of the main div. How can I do it?
I have add position:relative to your main div and position:absolute; bottom:10px to your div with class footerButtons to make it always near the bottom like this
Hope this help!
<div id="divPopUp" style="border: 2px solid gray; padding: 20px; width: 700px; background: white; height: 450px; position:relative">
<h1 style="text-align:center">Handsets</h1>
<table>some table content</table>
<div class="footerButtons" style="display: block; position:absolute; bottom:10px">
<div style="float: left;">
<input type="button" />
</div>
<div style="float: left; margin-left: 207px;">
<input type="button" />
<input type="button" />
</div>
</div>
Related
I am trying to add a div on top of another div as an overlay which will move out of the screen with the click of the image. I am trying to get the image on the right corner, but it disappears if I set it to float: right.
<div id="parentDiv" class="col-md-3" style="position: relative; z-index: 5000 !important; left: 0px;">
<div style="position: relative; top: 43px !important;
left: 0 !important; z-index: 5000!important;
background-color: #FFDAB9;width: 16%;">
<div style="width:88%;background-color: red; " id="goToDiv">
<div class="col-md-12" style="background-color: green;z-index: 50000;padding: 6px;">
<label>Section</label>
<select style="float: right;" name="ddlSection" wtx-context="AF97546D-94C2-4017-89B7-42826F695331">
<option>Section 1</option>
<option>Section 2</option>
</select>
</div>
<div class="col-md-12" style="background-color:slateblue;padding:6px;">
<label>Page No.</label>
<input style="float: right;width:100px;" type="text" placeholder="Page No." name="txtDesiredPageNum" wtx-context="BF8712F3-BABD-45CB-B001-03BBE1AF3F67">
</div>
<input type="button" value="Go!!" id="btnGotoPage" onclick="GotoPage(document.getElementsByName('txtDesiredPageNum')[0].value);" wtx-context="7D444472-408D-4252-BD1E-21003A7AAC74">
</div>
<span style="width:10%;/* float:right; */right: 10px !important;" onclick="hideBox();">
<img src="/static/assets/img/arrows.png" style="width: 12%;top: 10px !important;/* float: right; */right: 10px !important;">
</span>
</div>
</div>
add display: block and margin:auto to image
or you can wrap the image in a div and use text-right class if you are using bootstrap
<div id="parentDiv" class="col-md-3" style="position: relative; z-index: 5000 !important; left: 0px;">
<div style="position: relative; top: 43px !important;
left: 0 !important; z-index: 5000!important;
background-color: #FFDAB9;width: 16%;">
<div style="width:88%;background-color: red; " id="goToDiv">
<div class="col-md-12" style="background-color: green;z-index: 50000;padding: 6px;">
<label>Section</label>
<select style="float: right;" name="ddlSection" wtx-context="AF97546D-94C2-4017-89B7-42826F695331">
<option>Section 1</option>
<option>Section 2</option>
</select>
</div>
<div class="col-md-12" style="background-color:slateblue;padding:6px;">
<label>Page No.</label>
<input style="float: right;width:100px;" type="text" placeholder="Page No." name="txtDesiredPageNum" wtx-context="BF8712F3-BABD-45CB-B001-03BBE1AF3F67">
</div>
<input type="button" value="Go!!" id="btnGotoPage" onclick="GotoPage(document.getElementsByName('txtDesiredPageNum')[0].value);" wtx-context="7D444472-408D-4252-BD1E-21003A7AAC74">
</div>
<span style="width:10%;/* float:right; */right: 10px !important;" onclick="hideBox();">
<img src="/static/assets/img/arrows.png" style="width: 12%;top: 10px !important;/* float: right; */right: 10px !important;">
</span>
</div>
</div>
I have a row of divs:
row of divs
When I decrease the window size they move down and stack on top of one another
divs stacked on top of one another
another example of the divs stacked
Instead of having them move down one by one as the window size gets smaller I want them to all move down together to the next row like so:
how I would like the divs to display
How would I go about doing this using divs? or if there is another method (like flex boxes) please let me know. Thanks!
Here is all the relevant code:
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:white;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
CSS:
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
you need to consider a few points
you need to make div responsive in small screen devices by adding col-12 before col-md-6.
if you're using bootstrap then learn it well and you don't need to use inner css.
replace this:
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">MEMBERS</p></div>
<div class="pricing-box" style="margin-right: 10px; "><p style="font-size:50px"><b>$1495</b></p><p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p></div>
<div class="pricing-box"><p style="font-size:50px"><b>$2000</b></p><p style="font-size:23px; margin-top:-30px">VIPS</p></div>
</div>
with this:
<div class="col-12 col-md-6 pricing-boxes">
<div class="pricing-box"><h2><b>$1495</b></h2><h6>MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$1495</b></h2><h6>NON-MEMBERS</h6></div>
<div class="pricing-box"><h2><b>$2000</b></h2><h6>VIPS</h6></div>
</div>
Use #media and when size of screen is reduced to specific size then apply width: % to class .pricing-boxes like used in below snippet.
Use padding and margins according to need
.register_container {
background-color: #00205B;
width: 80%;
transform: translateX(12%);
display: inline-block;
margin: auto;
margin-top: -175px;
box-shadow: 5px 5px 5px #35353d;
}
.pricing-boxes {
display: flex;
}
.pricing-box {
display: inline-block;
background-color: white;
padding-left: 15px;
padding-right: 15px;
margin-top: 7%;
text-align: center;
}
#media screen and (max-width: 900px) {/*Value may be from where it start stacking*/
.pricing-boxes{
width: 100%;
/*adjust padding and margin according to need*/
}
}
<div style="margin-left:3%">
<div class="col-md-6" style="color:white; float:left; margin-top:1%">
<div>
<h2 style="color:black;"><b>Register by tommorow for the best rate!</b></h2>
<p class="b2">
Special rates for teams of 3+
</p>
</div>
</div>
<div class="col-md-6 pricing-boxes" style="display:inline-block; ">
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">MEMBERS</p>
</div>
<div class="pricing-box" style="margin-right: 10px; ">
<p style="font-size:50px"><b>$1495</b></p>
<p style="font-size:23px; margin-top:-30px">NON-MEMBERS</p>
</div>
<div class="pricing-box">
<p style="font-size:50px"><b>$2000</b></p>
<p style="font-size:23px; margin-top:-30px">VIPS</p>
</div>
</div>
</div>
<div class="col-md-12" style="color:white; margin-top:2%; margin-left:3%">
<p class="b1">Register Now and recieve 5,000,000</p>
<form style="margin-top:-15px;">
<input style="vertical-align: middle; width:80%; height: auto; font-size:24px; color:black;" type="text" id="email" name="email" placeholder="EMAIL ADDRESS">
<input style="vertical-align: middle; height:auto; font-size: 28px; margin-left:15px;" class="btn-primary" type="submit" value="SIGN UP">
</form>
<div>
<input type="checkbox" id="accept" name="accept" value="accept">
<label for="vehicle1"> I agree to receive information and updates</label><br>
</div>
</div>
</div>
I cant get the two object to the same height.
The table should be on the left side and the button at center but now the button stays under the table but I dont know why.
Here is a jsfiddle for it.
Code:
<div class="container">
<div class="text-center">
<div>
<table class="table col-sm-3">
<thead></thead>
<tbody id="ranking"><tr id="xOJzQ-ik9pNq3OKbAAAA"><td>1.</td><td style="width:10px" class="align-middle"><div style="background-color:green;width: 10px; height: 10px;"></div></td><td>Name</td><td>0 Pkt.</td></tr><tr id="JaH1T-7XNkBqa2cnAAAB"><td>2.</td><td style="width:10px" class="align-middle"><div style="background-color:RosyBrown;width: 10px; height: 10px;"></div></td><td>dfsdf</td><td>0 Pkt.</td></tr><tr id="jwEfjfA6COOTeG0ZAAAC"><td>3.</td><td style="width:10px" class="align-middle"><div style="background-color:gold;width: 10px; height: 10px;"></div></td><td>ffff</td><td>0 Pkt.</td></tr></tbody>
</table>
</div>
<div>
<input type="button" class="btn" value="" id="buzzer" style="background-color:red; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px;">
</div>
</div>
Edit: Both sould be at the top, not vertical center.
Try this
<div class="container">
<div class="text-center row">
<div class="col-sm-3">
...
</div>
<div class="col-sm-6">
<input type="button" class="btn m-auto" value="" id="buzzer" style="background-color:red; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px;">
</div>
</div>
Have a look at JSFiddle
I have 2 DIVs. Something like below:
<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
<div class="leftcolumn">
<div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
<div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
</div>
<div class="rightcolumn">
<div>
<label style="text-align: right;">Owner:</label>
<input type="text" name="owner" id="owner" style="width: 100px;">
</div>
<div>
<label style="text-align: right;">Estimate:</label>
<input type="text" name="estimate" id="estimate" style="width: 100px;">
</div>
</div>
</div>
And then css I am using is given below:
.leftcolumn { width: auto; border: 1px solid red; float: left}
.rightcolumn { width: 200px; border: 1px solid red; float: right}
Given below a screenshot for the issue I'm facing:
change css to:
.leftcolumn { width: auto; border: 1px solid red; margin-right: 204px;}
.rightcolumn { width: 200px; border: 1px solid red; float: right}
and replace right and left in html:
<div id="myForm" style="border: 1px solid black;width:500px;height:300px;margin-top: 10px;">
<div class="rightcolumn">
<div>
<label style="text-align: right;">Owner:</label>
<input type="text" name="owner" id="owner" style="width: 100px;">
</div>
<div>
<label style="text-align: right;">Estimate:</label>
<input type="text" name="estimate" id="estimate" style="width: 100px;">
</div>
</div>
<div class="leftcolumn">
<div><input type="text" name="title" id="title" placeholder="Type title here" style="width:auto;" /></div>
<div><textarea name="desc" id="desc" placeholder="Type description here" style="width:auto;"></textarea></div>
</div>
</div>
SEE FIDDLE
Instead of using a float for the left column, why not set the right margin to 200px (or 210px if you want some spacing);
.leftcolumn { margin-right: 210px; border: 1px solid red}
This will allow the right column to float into place within the margin.
You will also need to reverse the order of the divs in your html. You want the right column to come before the left. This will give you the fluid layout you want regardless of the width of "myForm".
I'm interested in having a textbox take up 100% width of the remaining space but without dropping the text "name" or the button to the next line:
<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<span>Name:</span>
<span><input type="textbox" style="width:100%" /></span>
<span><input type="button" value="Search" /></span>
</div>
http://jsfiddle.net/GP2nA/1/
How can I prevent the text and button from dropping to the next line?
Tested in IE7/8, Firefox, Chrome, Opera.
Live Demo
Live Demo (minus extra wrapper div)
CSS:
#search {
padding: 20px; background-color: #c0c0c0;
overflow: auto
}
#search div {
position: relative
}
.name {
float: left
}
.input {
position: absolute;
top: 0; right: 70px; left:55px;
}
.submit {
float: right
}
HTML:
<div id="search">
<div>
<span class="name">Name:</span>
<span class="input"><input type="input" style="width:100%" /></span>
<span class="submit"><input type="button" value="Search" /></span>
</div>
</div>
(You should have a form and a label tag in there)
UPDATED: http://jsfiddle.net/QaWMN/2/
Works in: ie7, ie8, ff, chrome
If you need ie6 read this: http://www.alistapart.com/articles/conflictingabsolutepositions/
html:
<div style="padding: 20px; background-color: #c0c0c0; position: relative;">
<span class="desc">Name:</span>
<div class="full">
<input type="textbox" class="tb" /></div>
<input type="button" value="Search" class="button" />
</div>
css:
span {position: absolute;}
.full {position: absolute; left: 60px; right: 100px; top: 8px;}
.desc {left: 10px; top: 8px; width: 100px;}
.tb {width: 100%; display: block;}
.button {right: 10px; width: 80px; top: 8px; position: absolute}
You could use something like the following:
<div style="padding: 20px; background-color: #c0c0c0">
<span style="width:10%;">Name:</span>
<span><input type="textbox" style="width:80%" /></span>
<span><input style="width:10%;" type="button" value="Search" /></span>
</div>
Where we simply give all elements (label, input and button) a percentage of the width to eat. Note that you will need to examine your form elements and adjust the 10% of labels to compensate for that of your widest label, and alter the 80% width of the input field accordingly too.
Also, as commented by another, extract your styles and place them in CSS classes as opposed to writing them inline.
It doesn't really quite work that way in css without fancy JavaScript. However, you CAN get the same look to happen with a slight reworking:
<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<div style="width: 10%; float:left;">
<span>Name:</span>
<span><input type="button" value="Search" /></span>
</div>
<div style="width: 90%; float:left;"</div>
<span><input type="textbox" style="width:100%" /></span>
</div>
<div style="clear:both;"></div>
</div>
Or easier:
<div style="width: 100%; padding: 20px; background-color: #c0c0c0">
<div style="width: 10%; float:left;">Name:</div>
<input type="textbox" style="width:80% float:left;" />
<input type="button" value="Search" style="width: 10%; float:left;" />
</div>
<div style="display: table; width: 100%">
<div style="display: table-row; padding: 20px; background-color: #c0c0c0">
<span style="display: table-cell;">Name:</span>
<input type="textbox" style="display: table-cell; width:100%" />
<span style="display: table-cell;">
<input type="button" value="Search" />
</span>
</div>
</div>
See updated fiddle.
Note: The advantage of using this method is that you won't have to set a width on the label or the button.