The following code blends both DIVs together instead of displaying them vertically, one after another. Both are set to display: block and I'd like to know which style attribute makes them behave like this?! See demo on jsfiddle.
<div data-role="page">
<div data-role="content">
<div>
Do something
<span href="#" style="float: right; border-radius: 10px; background-color: white; padding: .6em">Something</span>
</div>
<div>
<ul data-role="listview">
<li>Foo list entry</li>
</ul>
</div>
</div>
</div>
After using the floating elements you have to close them with element containing clear:both style, so the part of the code will be:
<div>
Do something
<span href="#" style="float: right; border-radius: 10px; background-color: white; padding: .6em">Something</span>
<div style="clear:both"></div>
</div>
Here is the working JSFiddle (with a little bit of margin modification as well): http://jsfiddle.net/Cw86p/9/
Related
I'm trying to make a container (a box) who contain infos and I want to fix the size but I want to make it responsive. Look this image to understand a bit better what I'm trying to do:
So that's permitted:
Same for the moment it's ok:
WRONG it should block the size
And I have tried the following code:
.liContainer {
list-style-type: none;
border-style: solid;
margin-bottom: 5px;
}
<li class="liContainer">
<div>
<h3>Container 1</h3>
</div>
<div id="id">
<span>90b5bb870feb5a1148e4f9042f87c957043b71d60dc91d743bccdc5a10c0f54f </span>
</div>
<div>
State:<span class="state">Running</span>
</div>
</li>
Add word-break:break-all - this allows the line to break between any two letters
See demo below:
.liContainer {
list-style-type: none;
border-style: solid;
margin-bottom: 5px;
word-break: break-all;
}
<li class="liContainer">
<div>
<h3>Container 1</h3>
</div>
<div id="id">
<span>90b5bb870feb5a1148e4f9042f87c957043b71d60dc91d743bccdc5a10c0f54f </span>
</div>
<div>
State:<span class="state">Running</span>
</div>
</li>
I am having some issues trying to display my <div checkoutoptionsto the right and my <div productdetailsto the left of checkoutoptions
Here is how it is displaying now:
Here is how I would like it to display
It looks like there is some kind of wrapping around the div checkoutoptionsthat won't let me move the div productdetails upbut I have not idea how to correct the issue.
Here is a link to my website as an example if you would like to see it first hand.
Here is my HTML:
<!-- Share and title/show this panel on top -->
<div class="ProductMain" style= "float: left; ">
<h1 itemprop="name">%%GLOBAL_ProductName%%</h1>
%%GLOBAL_FacebookLikeButtonAbove%%
%%GLOBAL_FacebookLikeButtonBelow%%
%%GLOBAL_PinterestButton%%
<!--side panel with add to cart show this panel to the right-->
<div id="checkoutoptions">
%%SNIPPET_ProductAddToCartRight%%
<div><input id="ShopButton" style="display: none";></div>
%%SNIPPET_ProductAddToCartBelow%%
%%Panel.SideProductAddToWishList%%
<div class="WishlistRow DetailRow" style="display:%%GLOBAL_HideWishlist%%">
<a class="WishListButton" href="javascript: void(0)">ADD TO WISHLIST</a>
</div>
%%GLOBAL_AddThisLink%%
</div>
<!--Yotpo Reviews/ display this panel next to checkoutoptions to the left and right under ProductMain-->
<div id="productdetails">
<div style="padding: 0px 0px 0px; width: 200px; margin: auto; height: 00px"> </div><!--yotpo product rating-->
<div class="yotpo bottomLine"
data-product-id="%%GLOBAL_ProductId%%"
data-url="%%GLOBAL_ProductLink%%">
</div>
<div class="ProductDetailsGrid">
<div class="DetailRow RetailPrice" style="display: %%GLOBAL_HideRRP%%">
<span class="Label">%%LNG_RRP%%:</span>
%%GLOBAL_RetailPrice%%
%%GLOBAL_YouSave%%
</div>
</div>
Here is my CSS so far:
#checkoutoptions{
margin:auto;
padding: 10px;
border-radius: 5px;
width: 310px;
border: 1px solid gray;
}
Switch place on the div with review and the div with product info. Result will be like
<div class="yotpo bottomLine yotpo-medium" data-product-id="705" data-url="" data-yotpo-element-id="2">
..... content
</div>
<div class="ProductDetailsGrid">
....content
</div>
should instead be rearranged to
<div class="ProductDetailsGrid">
....content
</div>
<div class="yotpo bottomLine yotpo-medium" data-product-id="705" data-url="" data-yotpo-element-id="2">
..... content
</div>
Doesn't look exactly like you wished for, but I believe it's quite good.
Actually the order/structure of elements is not good. You should restructure your html and create small containers for each section.
For example.
<div class="post-meta">
<div class="share-box">
<div class="share-buttons"><!-- fb and pinterest buttons --></div>
<div class="product-price-rating"><!-- item price, rating etc --></div>
</div>
<div class="cart-box">
<!-- cart and other code -->
</div>
<div class="clearfix"></div>
</div>
Now you can easily achieve the layout you want by floating each box and clearing float before closing parent.
.share-box{
float: left;
}
.cart-box{
float: right;
}
.clearfix{
clear: both;
}
Add to your css class:
display: inline-block;
I'm using bootstrap 2.3.2. I got this div class SingleNewsMain applied to many news items
<div class="SingleNewsMain">
<div class="NewsMainHeader">
Some header
</div>
<div class="NewsMainPublishInfo">
Some Info
</div>
<div class="NewsMainShort">
Some Short Content
</div>
<div class="NewsMainReadMore">
Some Read More
</div>
</div>
<div class="SingleNewsMain">
<div class="NewsMainHeader">
Some header
</div>
<div class="NewsMainPublishInfo">
Some Info
</div>
<div class="NewsMainShort">
Some Short Content
</div>
<div class="NewsMainReadMore">
Some Read More
</div>
</div>
In my .css I got following:
.SingleNewsMain{
padding-right: 25px;
padding-left: 110px;
}
But the point is, that it is applied only to the first div class "SingleNewsMain", other divs remain unchanged and dont have padding. Where did I fail?
try CSS1 specification important :
.SingleNewsMain{
padding-right: 25px!important;
padding-left: 110px!important;
}
read:http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
you are only selecting the parent. you need to select the children as well if you want this to be applied. So like this.
.SingleNewsMain, .SingleNewsMain div{
padding-right: 25px;
padding-left: 110px;
}
you should see how to use css selectors for best practice in your code.
http://www.w3schools.com/cssref/css_selectors.asp
All I want is my two divs to stack next to one another. They are located inside a container. Why isn't it working?
This is my CSS:
#housecontainer {
height: 420px;
width: 1000px;
padding-left: 110px;
padding-top: 80px;
}
#houseimage {
float: left;
height: 388px;
width: 516px;
}
#rose {
width:200px;
height:100px;
float:left;
}
Judging by the HTML you posted in your comment, your page structure is:
#devcontainer
#develbox
#housecontainer
#houseimage
p
a
img
#rose
Since #rose is a child of #houseimage, it doesn't follow the same floating as it. Since #houseimage has a width of 516 and so does the image, there's no room left for #rose and it is forced below.
Just put one more </div> before <div id="rose">, so that it's inside #housecontainer and next to #houseimage, like you want. Then add the two other </div> you're missing.
You have several structure errors.
Try structuring your HTML like this:
http://jsfiddle.net/bGyV4/
This is the HTML you posted in your comment:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
<div id="rose">
<div id="rose">THIS ISNT WORKING!!!</div>
</div>
</p>
</div>
</div>
There are a number of issues with this:
The id of an element must be unique. It is used to identify the element. In your markup there are two div elements with id="rose".
From your question, it seems as if you want #houseimage and #rose to be side-by-side. This is not happening because #rose is inside #houseimage. That is, it is a child of #houseimage. You need to move it outside the div so that #rose is a sibling of #houseimage.
Change your HTML to be like this:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">
<div id="roseChild">THIS ISNT WORKING!!!</div>
</div>
</div>
jsFiddle Demo
your html error,some DIV tag not closed,try this:
<div id="devcontainer">
<div id="develbox">
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">THIS ISNT WORKING!!!</div></div>
</div>
</div>
</div>
I am build a page,however I meet some layout related probelms,I can not make the div ajust its size(acutally the height) automatically. See the following markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<title>Link one</title>
<style type="text/css">
div#middle{
margin-top: 5px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div style="background-color: gray;border: solid 1px red" id="top">
<h1>Top<h1>
</div>
<div style="border: solid 1px blue;min-height: 200px" id="middle">
<div id="leftmenu" style="float: left;background-color:gray;width: 190px">
<ul>
<li><a href=''>Link One</a></li>
<li><a href=''>Link Two</a></li>
<ul>
</div>
<div id="content" style="background-color: black;margin-left: 200px">
I am in Link One
</div>
</div>
<div style="background-color: gray" id="foot">
<hr/>
<p>Copyright xxx</p>
</div>
</body>
</html>
Note the div whose id is "middle",I have to set its height manually,if not the div below it (div with id "foot")will not displayed below it. The foot div will go to the same line with "middle" div,just remove the "min-height: 200px" of "middle" div for a test.
And since the content is not sure,so I can not set its size manually,I just want to the height of the middle div to be the larger height of "leftmenu" or "content".
Any ideas?
-----------------------------------------
It does not expand ,
You are not clearing your floats. Add this line <div style="clear:both;"></div> below the the div with id=content
<div style="border: solid 1px blue;min-height: 200px" id="middle">
<div id="leftmenu" style="float: left;background-color:gray;width: 190px">
<ul>
<li><a href=''>Link One</a></li>
<li><a href=''>Link Two</a></li>
<ul>
</div>
<div id="content" style="background-color: black;margin-left: 200px">
I am in Link One
</div>
<div style="clear:both;"></div>
</div>
It does this because of the flow of the page. The flow is the order of the elements on your page. So in your example, your li elements are placed one after the other so the first one will appear before the second one on your page. The same applies to all elements, <a>, <div>, <p>, <img> and also text. When an element is floated it is taken out of the flow and elements that follow it are pushed up next to it; this way you can have text flowing around an image or links lined up next to each other.
Unfortunately when you float all elements within another element (as you have done with #leftmenu and #content) the parent element (#middle) acts as if it contains nothing because it has no child elements in the flow and acting as if it was essentially empty. By adding a clearing <div> we are creating a child element in the flow right below everything else and the parent element can then calculate the correct height.
I hope I explained that well enough.
The float:left is causing the issue. You need to insert a clearing element within middle.
eg
<div style="border: solid 1px blue;min-height: 200px" id="middle">
<div id="leftmenu" style="float: left;background-color:gray;width: 190px">
<ul>
<li><a href=''>Link One</a></li>
<li><a href=''>Link Two</a></li>
<ul>
</div>
<div id="content" style="background-color: black;margin-left: 200px">
I am in Link One
</div>
<div style="clear:both"></div>
</div>
JS Fiddle demo
Use a background-image to fake equal column height.
Check this article:
http://www.alistapart.com/articles/fauxcolumns/
For clearing use this class:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
like this
<div style="border: solid 1px blue;min-height: 200px" id="middle" class="clearfix">