My floats are acting strange (well I guess they're acting how they're supposed to), but I can't seem to understand why. For some reason the div box that contains 'Alex' always goes down to another line. Is there something I'm messing up?
style.css
.clear {
clear:both;
}
.page-header {
width:100%;
background:#efefef;
border-bottom:1px #ddd solid;
padding:3px 10px;
margin-bottom:24px;
}
.page-header-title {
width:200px;
float:none;
}
.page-header-search {
float:left;
width:100px;
}
.page-header-top_menu {
float:right;
width:200px;
}
index.html
<div class="page-header">
<div class="page-header-search">
blah
</div>
<div class="page-header-title">
Calender
</div>
<div class="page-header-top_menu">
Alex
</div>
<div class="clear"></div>
</div>
Thank you very much.
If you exchange the
float: none;
for the "calender"-div with
float: left;
the "Alex" behaves better.
You didn't specify how it should look like.
http://jsfiddle.net/wDp3p/ << I visualized your div-structure with red borders.
http://jsfiddle.net/wDp3p/1/ << version with float: left;
"float" is not really for solutions like table columns but for floating - so the "calender"-div floats directly after its left hand previous element.
You're floating it wrongly. You should assign a float property to .page-header-title.
Related
I'm trying to align a button and some text at the bottom of a div much like the example below with the Price and the Check it out button. What's the best way to do this. I've made a div, styled it to get the text, and picture right. I just need to attach the button to the right-hand side and the price to the left, inline with each other.
Similar to the product displays in the website thisiswhyimbroke.com
http://www.thisiswhyimbroke.com/
^^ Price and the Check It Out button. How do I achieve this?
Try like this: DEMO
Try to use reset you CSS first.
CSS:
*{
padding:0;
margin:0;
}
#priceAndButton {
width:100%;
display:block;
height:30px;
line-height:30px;
}
#priceAndButton h4 {
float:left;
vertical-align:middle;
}
#priceAndButton img {
float:right;
}
Hope this helps you
I have created a working fiddle with your requirements:
http://jsfiddle.net/8993H/
HTML:
<div id="main-container">
<div class="img-div"><img src="http://tiwibzone.tiwib.netdna-cdn.com/images/beer-chug-flowmeter1-300x250.jpg"/></div>
<div class="rhs">
<div class="button-nav">
<span class="price">$35.00</span>
<span class="check-btn"><button>Check It Out</button></span>
</div>
</div>
</div>
CSS:
#main-container{
width:100%;
border: 1px solid #aaa;
}
.img-div{
width:50%
}
.img-div img{
width:100%;
}
.rhs{
width:48%;
float:right;
position:relative;
}
.button-nav{
position:absolute;
bottom:10px;
width:100%;
}
.price{
float:left;
}
.check-btn{
float:right;
}
Try this:
button{
float:right
}
#price{
float:left
}
Here i created one working fiddle for your requirement.. You can re use this CSS. Hope This will help you.
HTML
<div class="desc">
<img height="200px" width="200px" src="http://www.clker.com/cliparts/8/2/2/6/11971154711712468971BigRedSmile_A_screwdriver_1.svg.med.png"/>
<p>Move over sliced bread, the water jet pack is officially the greatest thing ever. For only sixty eight grand you can own your very own water thrusting jetpack. It can lift you up to 30 feet high and thrust forward at 30 miles per hour – practically guaranteeing certain death.</p>
<div class="button">
Check it out
</div>
<div class="price">$500.00</div>
</div>
CSS
.desc{
text-align:jstify;
width:50%;
}
.button a{
background-color: #faab37;
color: white;
display: block;
float: right;
padding: 7px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.button a:hover{
background-color:#f9bd66;
}
Hope This is What your expected output
i have very simple scenario but i am really stuck with it and need your help please .
this is what i have to do .
This is a div with righ and bottom border and and image in its top . I have to display text same as this one . For this i am using bootstrap like this
<div class="span4" >
<h1 class="BoldText">
GET A QUOTE
</h1>
<span class="SimpleText">
INSERT TEXT HEREINSERT TEXT HEREIN-SERT TEXT HEREINSERT TEXT HEREINSER
</span>
</div>
now problem is that i have to show it in middle of box , if i set margin-left to h1 and <span> tag this is how it looks like this padding also does not work here . will someone guide me how do i adjust it . it seems simple but i am really unable to get it .
I would set widths:
http://jsfiddle.net/4YUtW/
.span4 {
width:300px;
border:1px solid #666;
}
h1 {
width:226px;
display:block;
margin:0 auto;
}
.SimpleText {
width:226px;
display:block;
text-align:justify;
margin:0 auto;
}
but, there are probably better solutions... Of course, you will have to change values to fit your needs.
You will need to set up your CSS as such:
#img {
background:transparent url('http://thebuzzdoha.com/wp-content/uploads/2014/06/fifa-world-cup-wallpaper-hd.jpg') top center no-repeat;
height:200px;
width:100%;
margin:0 0 20px 0;
}
.span4 {
border:1px dotted Black;
margin:0 auto;
width:400px;
text-align:center;
}
.span4 a {
color:Black;
text-decoration: none;
font-family: sans-serif;
}
.SimpleText {
display:inline-block;
margin:0 auto;
width:70%;
text-align:justify;
}
You can see this here->http://jsfiddle.net/5KjXq/
Hope this helps!!!
So, if you're not particularly attached to using bootstrap, doing this in pure html and css is relatively simple and usually a whole lot easier to read than the bootstrap spit-out code. I have made a fiddle with an example: http://jsfiddle.net/6aJJ5/1/. Hope that helps!
I'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}
I am having problems with my sidebar_box, as it is displaying a unwanted white space at the bottom of my images.
The thing is that this seems to happen only when I place an image inside (this doesn't happen with text or ul lists)
You can see this jsFiddle
My HTML structure:
<div id="sidebar">
<div class="sidebar_box">
<div class="sidebar_header">Advertisement</div>
<img src="./images/square_add.png" width="180" height="150" />
</div>
</div>
The relevant CSS to reproduce:
*{
padding:0;
margin:0;
}
img{
border:0;
}
#sidebar .sidebar_box{
width:180px;
background:#fff;
border:1px solid #000;
}
#sidebar .sidebar_header{
width:180px;
background:#ddd;
border-bottom:1px solid #000;
}
I am clueless and I have already tried everything of my knowledge.
Add vertical-align: bottom to your image. This happens because images are displayed inline, meaning they have to leave space below in case of q, p or other letters that drop below the baseline.
write this:
img{
border:0;
vertical-align:top;
}
Check this http://jsfiddle.net/sKE6y/1/
In IE7, my order sample button "#itmSampl" isn't vertically aligned with the ".add-to-cart" button to the left of it, although in FF3.6 and Chrome 5 it is. I need it to be aligned correctly in IE6-8. Does anyone see what I'm missing?
<style type="text/css">
#buttonbox { position:relative; width:326px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><%=getCurrentAttribute('item','addtocarthtml')%></table>
</div>
<div id="ordrWizrd" class="add-to-cart"><img src="/images/img/add-to-cart.gif" alt="configure item"></div>
<div id="itmSampl"></div>
</div> <div class="clearfix"></div> </div>
Also, here's the test page if a visual helps (you have to login to see the buttons instead of the bulleted list): http://www.avaline.com/85W_test_2
Login:test2#gmail.com
Pass:test03
Solution 1: Since you are already using a lot of tables in your page, another one won't hurt - just change your HTML from what you have above to something like this (may require a few tweaks):
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><tr>
<td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
<td valign="bottom"><div id="itmSampl"></div></td>
</tr></table>
</div>
<div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->
Solution 2: Take away all the "position: absolute" stuff with #itmSampl (remove the CSS bottom, position, right, and maybe margin and height/width properties). Then, add CSS float: right; margin-top: -36px; to #itmSampl to make it float on the right and move upward 36 pixels.