I am designing a page which lists several books. I am in trouble that content sometimes go out of book-info box, say a book's title is extremely long and go beyond 140px height. I wonder what's the best solution to this? Below is the sample of my code.
//css
.book-data{height: 140px; width: 500px};
.book-image{float: left; width: 200px;}
.book-info{float: left; widdth: 300px;}
//html
<div class="book-data">
<div class="book-image"></div>
<div class="book-info">content</div>
</div>
<div class="book-data">
<div class="book-image"></div>
<div class="book-info">content</div>
</div>
simple as:
overflow: hidden
http://jsfiddle.net/seler/pyseH/
If you let the book-data div keep it's height to auto; than your text can wrap around and despite the float. using clear both property will prevent the book-data div to collapse when yyou don't set it's height. Try this i am sure it will work;
//css
.book-data{width: 500px};
.book-image{float: left; width: 200px;}
.book-info{float: left; widdth: 300px;}
.clear {clear:both;}
//html
<div class="book-data">
<div class="book-image"></div>
<div class="book-info">content</div>
<div class='clear'></div>
</div>
<div class="book-data">
<div class="book-image"></div>
<div class="book-info">content</div>
<div class='clear'></div>
</div>
Related
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;
Hello I want to stylize this structure HTML with CSS , need to create 3 row . 1.header 2.maincontent 3.footer ! and i need to add a scrollbar for all mainpage , just 1 scrollbar not 1 per each row...
Like is on structure of code I want the style for header , maincontent and footer. Waiting for help.
<div id="header">
<div id="headerLeft">
<div class="msgs">Mesazh</div>
<div class="points">Points</div>
</div>
<div id="headerRight">
<div class="hungry">Hungry: </div>Action:
</div>
<div id="maincontent">
<div class="output">LALALALALALALA</div>
</div>
<div id="footer">
<div id="footerleft">
<div class="onlinePlayer">Klevi</div>
</div>
<div id="footerCenter">
<div class="map">harta</div>
<div class="forum">forumi</div>
<div class="logout">logout</div>
</div>
<div id="footerRight">
<div class="details">details</div>
<div class="inventory">inventory</div>
<div class="support">support</div>
</div>
</div>
</div>
You have already asked about the scrollbar 2 other times today.
The basic way to create a layout is using floats to display divs next to each other. You put these divs in a container. You can make the columns fluid with a percentage or fixed.
The HTML for the header would look like
<div class="row">
<div class="two cols">a</div>
<div class="one cols">s</div>
</div>
First css is for the row or container of the div.
.row {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: #fff;
}
The second css is the base code for each type of column.
.col, .cols {
margin-left: 4.40%;
float: left;
min-height: 1px;
position: relative;
}
Below controls the width for the different columns
.col:first-child, .cols:first-child {
margin-left: 0px;
}
.row .one.cols {
width: 30.4%;
}
.row .two.cols {
width: 65.2%;
}
.row .three.cols {
width: 99.99999999999999%;
}
The example below is based on foundation by ZURB
http://jsfiddle.net/vmbm55fo/
I am currently making a website for a college task and I am really confused on why the div I am trying to create is not appearing.
It doesn't seem to work since I added the code for the three boxes, they are meant to be the same width as the three boxes.
JsFiddle
<div id="wrapper">
<div id="top">
<div class="logo"> </div>
</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
</div>
You just need to add box-sizing property
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_one {
/*Other Style */
box-sizing:border-box;
}
#deal_three {
/*Other Style */
box-sizing:border-box;
}
Reference
Fiddle Demo
You Border-Width in each Box counts to the width.
Look at the Box-Model: http://www.w3schools.com/css/css_boxmodel.asp
Given what you said in the comments, a possible answer:
HTML at the bottom:
<div id="threeBoxContainer">
<div id="deal_one"></div>
<div id="deal_two"></div>
<div id="deal_three"></div>
</div>
<div id="bigbox"></div>
CSS:
#bigbox {
width: 98%;
height: 300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
margin-top: 5%;
}
It seems to work for me. I can only get a solid line like you referred to if i leave the height out.
Its because css width only represents the content width. Total width is the combination of padding, margin and border.
Total Width=ContentWidth+Padding+Border+Margin
So giving width to 33% and some margin,padding and border is making it actually greater than 33%. Reduce the width size to achieve the desire results. Around 30 or 31% will be good.
Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.
I'm abysmal at HTML so looking for some help in recreating the following. I could do it with a table, but understand that that is a no-no nowadays. So advice is needed.
alt text http://img130.imageshack.us/img130/8623/4panel.jpg
What I am wanting to achieve is four fixed size boxes then spread across the page on a single row. These boxes will have some information in them, possibly text, possibly images and possibly both.
The boxes will be static size, ie I don't want them resizing to fit the width of the browser window. I'm guessing it probably going to be done with the div tag but I don't have the first clue where to start.
You want something like this (not tested)
<div id="wrapper">
<div id="box1" class="box">
<!-- your content here -->
</div>
<div id="box2" class="box">
<!-- your content here -->
</div>
<div id="box3" class="box">
<!-- your content here -->
</div>
<div id="box4" class="box">
<!-- your content here -->
</div>
</div>
with the CSS
.box{
width: 200px;
margin-left: 20px;
float: left;
}
#box1{
margin-left: 0;
}
#wrapper{
margin: 0 auto; // Center on the page
width: 860px;
}
You can use four fixed-width/height divs which are all set on float:left;.
<div class="box">Some content</div>
<div class="box">More content</div>
<div class="box">Maybe an image</div>
<div class="box">Some content and an image</div>
with this css:
.box {
width: 200px;
float: left;
}
Well, it's not so tricky:
<div class="panelwrapper">
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
That's really all the HTML you should need.