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.
Related
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
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;
At the moment my html page has 2 divs that hold all the information on the page one underneath the other. Now I want there to be a side bar to the left of them spanning down the entire page.
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
I would normally do this using the bootstrap grid template, however I am using an angular drag and drop library and using that (for some reason) messes up the animations when things are being moved around.
What would be the easiest way of adding in another div to act as a side menu always to the left of the two divs shown?
You can do something like this:
.sidebar {
background: #eee;
width: 100px;
height: 50px;
margin-right: -100%;
margin-bottom: 10px;
position: relative;
display: block;
overflow: visible;
float: left;
box-sizing: border-box;
}
.page-content {
background: #aaa;
margin-left: 100px;
}
<div class="container">
<div class="sidebar-wrapper">
<div class="sidebar">
SIDEBAR<br>
AT LEFT;
</div>
</div>
<div class="page-content-wrapper">
<div class="page-content">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Trade-offs of this approach:
You need to put a fixed width to your sidebar (either by px, %, or anything)
You need either to have a fixed height or to let the sidebar has the height of the content (you can't put height: 100%;)
You can float a sidebar left, but to have it fill the page’s full height all its ancestor elements must have height: 100%. If .sidebar is directly under body, these styles will do it:
html, body, .sidebar { height: 100% }
.sidebar { float: left }
Sample, with tinted backgrounds to show block outlines.
I m not sure I understand entirely the question so I ll try to answer.
I would create a div with float left css to have a nav within for your left menu and if it has to be all along the page . And another div either float right or none to keep the 2 divs you created.
You can use flexbox (adjust your needs)
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.flex-item {
-webkit-flex: 1 auto;
flex: 1 auto;
}
DEMO HERE
Wrap it all in a container with
display: table;
width: 100%;
table-layout: fixed;
then create a sidebar div with
display:table-cell;
vertical-align:top;
width:35%;
and wrap your content in a container with
display:table-cell;
vertical-align:top;
width:100%;
make sure your side bare is above your content for it to be on the left.
and that's you a flexible grid with a sidebar.
You can use col-md-3 and col-md-9 for sidebar and content respectively. Fix the sidebar using position: fixed
BootPly Demo
I have the following webpage which works in IE7 but not in IE8;
The HTML:
<div class="content">
<div class="inner_content">
<div class="column">
<div class="widget">
1
</div>
</div>
<div class="column">
<div class="widget">
4
</div>
</div>
<div class="column">
<div class="widget">
7
</div>
</div>
</div>
</div>
<div class="footer">
<div class="inner_footer">
footer
</div>
</div>
The CSS:
.inner_content, .inner_footer
{
width:983px;
margin:auto;
padding:10px;
}
.content
{
background:#FFFFFF;
}
.footer
{
background:#BBBBBB;
}
The problem:
For some reason the footer div goes underneath the content div in IE8 but not in IE7. How do I get it to look the same in IE8 as it looks in IE7? The IE7 look is how I want it to look.
jsFiddle:
http://jsfiddle.net/GgpaP/
You need to contain the floated .columns inside .inner_content.
One way to do this is to add overflow: hidden: http://jsfiddle.net/thirtydot/GgpaP/3/
This will also make it work in modern browsers.
Add clear:both to footer...
DEMO
Also slight modification has been done for container.
Add display:inline-block to your content-class (in css).
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>