I want like this:
| |
| |
| |
| |
|left right|
| |
It's on the footer and one is left,the other is on the right.
My code failed to do it. How to solve it?
<div style="height:15%;position:absolute;bottom:0px;width=100%">
<div style="float:left;left:0;width:100px;border:1px solid red">footer leftest</div>
<div style="float:right;right:0;width:100px;border:1px solid green;">footer rightest </div>
</div>
http://jsfiddle.net/gclsoft/xdUdE/
You just have a typo: width=100% should be width:100%
An example : http://jsfiddle.net/xdUdE/1/
Use text-align if you want to align inline elements like text or pictures:
<div style="height:15%;position:absolute;bottom:0px;">
<div style="float:left;text-align:left;width:100px;border:1px solid red">left</div>
<div style="float:left;text-align:right;width:100px;border:1px solid green;">right</div>
</div>
Related
I'm trying to display a scrollable dropdown in a scrollable div
To manage dropdown, I'm using position:relative on the container and position:absolute
on the content, but if the dropdown content is higher than the container, or start at the end of the scrollable content, it will be displayed below, and maybe hiden by the overflow
example
example
I'm looking for a way to display this dropdown outside/over the parent div, like a native select do.
I have something like this
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+------------------------+
... but I want something like this (thanks for the illustration :) ) :
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+---| the parent. |----+
+---------------+
Here is an example of what I'm trying to do https://codepen.io/spoissonnierAz/pen/LYWOarx
HTML
<div class="parent">
<div class="data">other</div>
<div class="data">
<div id="show1" onclick="$('#dropdown-content1').show();$('#show1').hide();$('#hide1').show()">show</div>
<div id="hide1" onclick="$('#dropdown-content1').hide();$('#show1').show();$('#hide1').hide()">hide</div>
<ul id="dropdown-content1" class="dropdown-content">
<li>data</li>
...
<li>data end</li>
</ul>
</div>
<div class="data">other</div>
...
<div class="data">other</div>
<div class="data">
<div id="show2" onclick="$('#dropdown-content2').show();$('#show2').hide();$('#hide2').show()">show</div>
<div id="hide2" onclick="$('#dropdown-content2').hide();$('#show2').show();$('#hide2').hide()">hide</div>
<ul id="dropdown-content2" class="dropdown-content">
<li>data</li>
...
<li>data</li>
<li>data end</li>
</ul>
</div>
<div class="data">other</div>
<div class="data">
<select>
<option>data</option>
....
<option>data</option>
<option>data end</option>
</select>
</div>
<div class="data">other</div>
</div>
CSS
.parent {
overflow: auto;
}
.data {
position:relative;
}
.dropdown-content {
display: none;
position: absolute;
height:100px;
overflow: auto;
z-index:50;
}
.dropdown-content > li {
display: block;
}
#hide1,#hide2 {
display: none
}
Thanks
I am assuming you have this...
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+------------------------+
... but you want this:
+------------------------+
| other |
| show |
| +---------------+ |
| | Content which | |
| | expands over | |
+---| the parent. |----+
+---------------+
You can position the container with additional information using .position() and .offset() or use .css() directly, which ever works for you.
See stackoverflow search results for "jquery position element relative to another" or similar.
One example here: How to position one element relative to another with jQuery
jQuery offset
jQuery position
jQuery css
I tried to add a row to the bottom of my Div Thumbnail but I can't seem to get it right, nor find a working answer.
<div class="item col-lg-4">
<div class="thumbnail">
<div class="caption">
<h4 class="list-group-item-heading"><?php echo $row["name"]; ?></h4>
<p class="list-group-item-text"><img style="width: 100%; padding-bottom: 10px;" border="0" src="<?php echo $row["description"]; ?>"></p>
<div class="row">
<div class="col-md-6 ">
<p class="lead"><?php echo '€'.$row["price"].' EURO'; ?></p>
</div>
<div class="col-md-6 ">
<a class="btn btn-success" href="cartAction.php? action=addToCart&id=<?php echo $row["id"]; ?>">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
most likely if you put this in a normal code it wont give back anything at all. because it gets info from a sql database. but it gives back something like this:
|================| |================|
| picture | | picture |
| | | |
| - | | - |
| | but i want it to be like. | |
| price, button | | |
| | | |
| | | |
| | | |
| | | price, button |
|================| |================|
the problem is. adding an extra class to the row and giving it vallign bottom, or just bottom: 0px; does not work.
the big form is the Thumbnail, and the price and button are in a row. so u know what that form is might it be useful info.
sorry for bad english, not my native language.
and really sorry if this answer is to obvious but I'm new to bootstrap.
This may be what you need:
.thumbnail {
position: relative;
height: 300px; /* Replace with your desired thumbs height */
}
.row-bottom {
position: absolute;
bottom: 0;
width: 100%;
}
Check this example
I have a 2 forms which are both nested in a containing div. I am trying to place both forms(and their containing divs) side by side via the use of floats.
While i am able to do so successfully, upon closer examination of the containing divs using chrome's developer tools, i noticed that while my forms are placed apart from each other, the margins specified the the css are being applied to the forms inside the containing divs and not on the containing div, though it was specified in the css for the containing div.
HTML(Extract)
<div id='UserRegistrationContainer'>
<div id='UserRegistrationCover' class='RegistrationFormCover'>
<input type='button' id='UserSignUp' value='Sign up today!' />
</div>
<form id='UserRegistration' class='RegistrationForm' method='POST' action='#'>
//Form inputs/details here
</form>
</div>
<div id='ShopRegistrationContainer'>
<div id='ShopRegistrationCover' class='RegistrationFormCover'>
<input type='button' id='ShopSignUp' value='Sign up today!' />
</div>
<form id='ShopRegistration' class='RegistrationForm' method='POST' action='#'>
//Form inputs/details here
</form>
</div>
CSS
.RegistrationFormCover{
position:absolute;
width: 100%;
height: 100%;
background: #0000CC;
z-index: 100; }
#UserRegistrationContainer{
position: relative;
float:left;
width:40%; }
#UserRegistration{
display:inline-block; }
#ShopRegistrationContainer{
position: relative;
float:left;
width:40%;
margin-left: 50px; }
#ShopRegistration{
display:inline-block; }
Visual example
Why am i getting this
<UserRegistrationContainer><------ShopRegistration Container-------------->
---------------------------------------------------------------------------
| | |
| | |
| | |
| 50px | |
UserRegistration | <--margin --> | ShopRegistration |
| | |
| | |
| | |
---------------------------------------------------------------------------
and not getting this?
<UserRegistrationContainer> <--ShopRegistration Container-->
---------------------------------------------------------------------------
| | |
| | |
| | |
| 50px | |
UserRegistration | <--margin --> | ShopRegistration |
| | |
| | |
| | |
---------------------------------------------------------------------------
jsfiddle: http://jsfiddle.net/x6SfW/
I think your first issue is that so many of your divs have their position property set as well as float property. All of those css styles have very specific uses and from what I can tell they are not entirely necessary for what you are trying to accomplish, two vertically aligned divs with each with two sections that take up ~80% of the page.
First lets look at the HTML.
<div id="userRegistration" class="registration">
<div>
<input type='button' value='Sign up today!' />
</div>
<form method='POST' action='#'>
//Form inputs/details here
</form>
</div>
<div id="shoppingRegistration" class="registration">
<div>
<input type='button' value='Sign up today!' />
</div>
<form method='POST' action='#'>
//Form inputs/details here
</form>
</div>
Removed extra tags ids and classes which are unnecessary.
Next up is the CSS.
.registration div{ //replaces RegistrationFormCover
width: 100%;
height: 100%;
background: #0000CC;
z-index: 100;
}
.registration {
width: 40%;
float: left;
position: relative;
}
.registration form {
display: inline-block;
}
#shoppingRegistration{
margin-left: 50px;
}
As to your actual problem right now I just realized you probably just miss read the chrome developer tools. The orange color represents a margined area not an actual piece of the div.
Either way the code here works so good luck and I hope it helps you.
So i'm trying to make my own forums and i've decided to start with twitter bootstrap to get myself off the ground. In the left column is the poster information like the poster's username, the date posted, and any controls like edit, delete, etc when applicable. the right column is the message posted. The problem is that if the message is really short the post ends up looking weird like the diagram below:
--------------------
| | |
| | |
| |-------------
| |
-------
I would like to set the minimum height of the message column to be the height of the poster info column so that for short messages the layout would look more like:
--------------------
| | |
| | |
| | |
| | |
--------------------
here is a snippet of the code i have:
html:
<div class="row slight-margin-vert">
<div class="col-md-3">
<div class="slight-margin-vert">
<p><strong>Username</strong></p>
<p><strong>Posted:</strong> 10 minutes ago </p>
</div>
</div>
<div class="col-md-9">
<div class="background-white rounded">
<p>lorem ipsum</p>
</div>
</div>
</div>
css:
.background-white {
background-color: #ffffff;
padding: 15px;
}
.rounded {
border-radius: 15px;
}
.slight-margin-vert {
margin-top: 15px;
margin-bottom: 15px;
}
I want something below like structure in my webpage:
+---------------+ +-----------+
| | | |
| | | Div-B |
| | |Float:left |
| | | |
| Div-A | | |
| Float: left | +-----------+
| | +-----------+
| | | Div-C |
| | |<marquee> |
| | |</marquee> |
| | +-----------+
| |
+---------------+
But I can't creat Div-C like above style. If I give a different background color of Div-C, it extends to left border of Div-A. So I can't make white spaces between Div-A and Div-C. It is becoming like this:
+---------------+ +-----------+
| | | |
| | | Div-B |
| | |Float:left |
| | | |
| Div-A | | |
| Float: left | +-----------+
|---------------|-+-----------+
| Div-C |
| (Background color fills |
| this whole section |
|---------------|-+-----------+
| |
+---------------+
Also note that Div-C contains a marquee.
Please give me solution.
Why don't you use something like this: (working jsFiddle)
HTML:
<div id="mainContainer">
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
</div>
CSS:
#mainContainer{ overflow:hidden; }
#divA{ float:left; width:60%; }
#divB{ float:right; width:30%; }
#divC{ float:right; width:30%; }
2 ways possible.
1) You could use CSS Positioning. Cover all your divs in a mother div then give the mother div a CSS position:relative; and a desired width and height... then all the Children CSS position: absolute; then DivA could have CSS left:0px; then DivB could go for a CSS right:0px; top:0px; then DivC CSS right:0px bottom:0px;... give them their respective widths and Colors.
Example:
<style type="text/css">
.kids{position:absolute;}
</style>
<div id="mainContainer" style="width:300px; height:500px; background:#ccc; position:relative;">
<div class="kids" id="divA" style="width:60%; height:100%; top:0px; left:0px; background:orange;">A</div>
<div class="kids" id="divB" style="width:60%; height:50%; top:0px; right:0px; background:green;">B</div>
<div class="kids" id="divC" style="width:60%; height:50%; bottom:0px; right:0px; background:red;">C</div>
</div>
Fiddle: http://jsfiddle.net/pgkWL/
2) Create a <table> with 1 full column and 2 half columns. Place the divs in respective columns.
<div id="aNewWrapper" style="width:300px; height:500px;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" rowspan="2" height="500"><div id="divA" style="width:100%; height:100%; background:orange;">A</div></td>
<td width="50%" height="250"><div id="divB" style="width:100%; height:100%; background:green;">B</div></td>
</tr>
<tr>
<td height="250"><div id="divC" style="width:100%; height:100%; background:red;">C</div></td>
</tr>
</table>
</div>
Fiddle: http://jsfiddle.net/tWCBP/