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
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 have some simple markup where I have created an overlay that takes up the whole screen (using position: absolute), then inside that I want to create some columns using floats.
HTML
<div class="overlay">
<div class="position-modal">
</div>
<div class="modal">
<h3>Enter email</h3>
<form action="">
<input type="text">
<input type="submit" name="" id="" value="submit" />
</form>
</div>
<div class="position-modal">
</div>
</div>
CSS
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,255,0,0.75);
}
.modal, .position-modal {
box-sizing: border-box;
float: left;
width: 33.3%;
}
What I want to achieve is this:
+--------------+-------------+-------------+
| | | |
| This column | | This column |
| only exists | Enter email | only exists |
| to | +----+ ++ | to |
| centralize | +----+ ++ | centralize |
| main col | | main col |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+--------------+-------------+-------------+
But everything is sitting to the left,
This is what I'm getting - http://codepen.io/anon/pen/YwNzqa?editors=110
Is it possible to float these divs when their parent is absolute?
The issue is that the .position-modal elements have a height of 0. This means that the .modal element doesn't take them into consideration (resulting in it being positioned to the left). You will notice that if you set min-height on the elements, it will work as expected:
Updated Example
.modal, .position-modal {
box-sizing: border-box;
float: left;
width: 33.3%;
min-height: 1px;
}
However, in my opinion, the above solution is relatively hackish. Unless there is a valid reason to do that, I would simply recommend using margin: 0 auto to center the element horizontally instead.
Updated Example
.modal {
box-sizing: border-box;
width: 33.3%;
margin: auto;
}
You don't need to do that.
<div class="overlay">
<div class="modal">
<h3>Enter email</h3>
<form action="">
<input type="text"><br />
<input type="submit" name="" id="" value="submit" />
</form>
</div>
and
.modal, .position-modal {
box-sizing: border-box;
text-align: center;
width: 33.3%;
}
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 am using the 1140px fluid grid (cssgrid.net) layout.
I am having some problem..
My layout looks like this:
Side Menu - Content
- Content
- Content
- Content
- etc. etc.
My problem is, that my layout does like this:
Side Menu - Content
Content
Content
Content
Content
etc. etc.
I want, so my "Side Menu" is full height, so it will push the content to "the right".
My layout (Exist of 12 cols):
<div class="container">
<div class="row">
<div class="twocol">
-- Side Menu Content Here --
</div><!-- END 2col -->
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
</div><!-- END .row -->
</div><!-- END .container -->
The CSS is:
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
/*max-width: 1140px; */
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}
.row .onecol {
width: 4.85%;
}
.row .twocol {
width: 13.45%;
}
.row .threecol {
width: 22.05%;
}
.row .fourcol {
width: 30.75%;
}
.row .fivecol {
width: 39.45%;
}
.row .sixcol {
width: 48%;
}
.row .sevencol {
width: 56.75%;
}
.row .eightcol {
width: 65.4%;
}
.row .ninecol {
width: 74.05%;
}
.row .tencol {
width: 82.7%;
}
.row .elevencol {
width: 91.35%;
}
.row .twelvecol {
width: 100%;
float: left;
}
.last {
margin-right: 0px;
}
I hope you can help me. Thank you.
Your layout looks this way:
body
+------------------------------------------------------------+
| two col content ten col content |
| +--------------+ +---------------------------------------+ |
| | | | | |
| | | | | |
| +--------------+ +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
| +---------------------------------------+ |
| | ten col content | |
| | | |
| +---------------------------------------+ |
+------------------------------------------------------------+
Do not repeat that ten col content. Keep it as a wrapper and use smaller divs. Like this:
body
+------------------------------------------------------------+
| two col content ten col content |
| +--------------+ +---------------------------------------+ |
| | | | +-----------------------------------+ | |
| | | | | | | |
| +--------------+ | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| | +-----------------------------------+ | |
| | | | | |
| | | | | |
| | +-----------------------------------+ | |
| +---------------------------------------+ |
+------------------------------------------------------------+
In case if you want the HTML Code,
<div class="container">
<div class="row">
<div class="twocol">
-- Side Menu Content Here --
</div><!-- END 2col -->
<div class="tencol last">
<div>
content content content
</div>
<div>
content content content
</div>
<div>
content content content
</div>
<div>
content content content
</div>
</div>
</div><!-- END .row -->
</div><!-- END .container -->
Hope it helps!
You can add height: 100% to the menu-div (twocol). That should do it.
In any way: maybe it would be a bit better to change the structure of the divs a bit:
<div class="menu">
-- Side Menu Content Here --
</div>
<div class="content">
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
<div class="tencol last">
content content content
</div>
</div>
I my experience it makes the layouting easier, when you have seperate divs containing the menu, content, header and footer.
When you use float, I often set a backgroudcolor to my divs during development, so I can see how much space they take (especially the height). Because as soon as the div ends, all left floated divs will go as far left as they can.
I just did it here on jsfiddle ( http://jsfiddle.net/cXXGj/ ). I think you need this way. I just wrapped content inside another div with class content_container. Have a look at the fiddle: http://jsfiddle.net/cXXGj/