I am using bootstrap and am trying to fix a div to the top of the body-container div.
Using this css, I am able to accomplish fixing the div to the top of the container, but it spills outside the right of the body-container div:
.top-bar {
position: fixed;
z-index: 1030;
top: 60px;
width: 100%;
}
.top-bar .item-count h4{
text-align: center;
}
Here is the all my html/css: https://jsfiddle.net/rttvqa3k/
Check this if its helpful.. :)
OLD:
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
NEW:
<div class="navbar-fixed-top container" style="top:60px;">
<div class="panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
</div>
This answer explains the issue with position: fixed relative to a container. The answer does offer ways to accomplish this but it deals with known widths.
The problem with using "fixed" positioning is that it takes the
element out of flow. thus it can't be re-positioned relative to its
parent because it's as if it didn't have one.
You can set the width or the max-width (.top-bar width 750px) of the fixed element, but then you will have to deal with the media queries for different screen sizes.
I'll just post this so that you get things clear since it would be too long for a comment in the answer marked as correct.
There are several values you can use in the CSS property position.
Static, which is the default, relative, absolute and fixed.
Read more about that here.
If you use position: fixed; without defining top and left values, your element will default these values to where its parent element is rendered.
Here's an example for clarity:
If your body content has padding-left: 15px; your element with position: fixed; will have a default value of left: 15px;. The same goes for top, if your parent element is positioned (X)px top from the viewport, lets say X equals to 60 your position: fixed; element will default to top: 60px;
You can see this behavior here: (Notice that I did not reference bootstrap.js so you can see it has nothing to do with your problem.)
.top-bar {
position: fixed;
z-index: 1030;
width: 100%;
}
body {
padding-top: 135px;
}
footer {
text-align: center;
}
.top-bar {
position: fixed;
z-index: 1030;
width: 100%;
}
.top-bar .matter-count h4 {
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="/">Home</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br/>
<br />
<br />
<br />
<br />
<br />
<br />
<br/>some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br/>event more content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br />event more content
</div>
</div>
<hr />
<footer>
<p>© Some Application</p>
</footer>
</div>
</body>
So the correct approach is to set this properties so they don't default.
This way:
.top-bar {
position: fixed;
top: 60px;
left: 0;
z-index: 1030;
width: 100%;
}
body {
padding-top: 135px;
}
footer {
text-align: center;
}
.top-bar {
position: fixed;
top: 60px;
left: 0;
z-index: 1030;
width: 100%;
}
.top-bar .matter-count h4{
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="navbar-brand" href="/">Home</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="top-bar panel panel-default">
<div class="panel-body row">
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 matter-count">
<h4>### Items in Report</h4>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<button class="btn btn-default pull-right">Button 3</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br/>
<br />
<br />
<br />
<br />
<br />
<br />
<br/>
some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br/>
event more content
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Some region
</div>
<div class="panel-body">
some content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
some more content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
event more content
</div>
</div>
<hr />
<footer>
<p>© Some Application</p>
</footer>
</div>
</body>
Add overflow-x to your class description. This will add a scroll bar when needed
overflow-x:auto;
Related
I'm using Materialize grid but for some reason I'm getting a gap when my grid is on large screens.
I was using Bootstrap and Materialize and realised it was a bad idea to use both, so I removed Bootstrap grid and redid it in Materialize grid.
However I'm not sure if it's to do with changing over to Materialize grid as I had the same problem on Bootstrap grid. I may have messed with script tags and link tags in my header and footer so that may have messed something up.
Please see the screenshot below and my code for HTML, CSS, header, footer.
#store {
padding: 2%;
background-color: #c8def7;
}
.item-name {
margin-top: 4%;
font-size: 1.4rem;
text-align: left;
}
.item-add {
margin: auto;
padding: 10px;
margin-top: 10px;
display: block;
width: 100%;
background-color: #a8323a;
font-family: 'Open Sans', sans-serif;
}
.item {
margin-top: 4%;
font-family: 'Baloo Tammudu 2', cursive;
padding: 15px;
border-radius: 15px;
}
.price {
color: red;
text-align: center;
float: right;
font-size: 1.4rem;
}
.item-details {
margin-top: 4%;
text-align: center;
}
.item-pic {
width: 100%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/styles.css">
<!-- Materialize -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<!-- Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/v4-shims.js"></script>
<!-- Materialize -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap" rel="stylesheet">
<title></title>
</head>
<body>
<div class="selling-items">
<div class="row">
<div class="col m4 l3">
<div class="item item-1">
<img class="item-pic item-pic-1" src="images/item-1.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-2">
<img class="item-pic item-pic-2" src="images/item-2.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-3">
<img class="item-pic item-pic-3" src="images/item-3.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-4">
<img class="item-pic item-pic-4" src="images/item-4.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-5">
<img class="item-pic item-pic-5" src="images/item-5.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-6">
<img class="item-pic item-pic-6" src="images/item-6.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-7">
<img class="item-pic item-pic-7" src="images/item-7.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
<div class="col m4 l3">
<div class="item item-8">
<img class="item-pic item-pic-8" src="images/item-8.jpg" alt="">
<hr />
<div class="item-details">
<span class="item-name">Blue Plaid Shirt</span>
<span class="price">€23.99</span>
<button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
</div>
</div>
</div>
</div>
</div>
</body>
This case needs to standardize the height of the image elements
solution:
edit height of images on photos editor like as photoshop, paint
===================== OR ======================
css:
.item-pic {height: 20vw}
===================== OR ======================
js:
let _height = 0;
$('.item-pic').each(function () {
if ($(this).height() > _height) {
_height = $(this).height();
}
});
$('.item-pic').height(_height);
example: https://codepen.io/Em-An/pen/ExKLZNG
I don't find any fault in the html codes nor the style and even the document i made from this same codes shows proper results that you might be expecting. Try adding browser support and updating your browser.
Or try putting the BR tag after desired products.
I have what I call a tricky problem. I want to align two buttons with the panel-title and have them justified right. However, when I put them in I get this:
https://jsfiddle.net/mwoods98/fo58qswn/3/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Order Summary Details</strong></h3><span class="pull-right" style="position: relative;top: -110%;"><button class="btn btn-primary pull-right" type="button"><span class="pull-right" style="position: relative;top: -110%;">Print Summary</span> <button class="btn btn-primary" type="button">Print Label</button></button></span>
</div>
</div>
</div>
</div>
</body>
</html>
The result I want is the buttons aligned on the same line as the title.
Thanks!
You can set the position of buttons absolute :
<span class="pull-right" style="position: absolute;top: 2px;right: 21px;">
<button type="button" class="btn btn-primary pull-right">Print Summary</button>
<button type="button" class="btn btn-primary">Print Label</button>
</span>
https://jsfiddle.net/xewLs6t2/
Another solution can be something like that:
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="height: 40px;">
<h3 class="panel-title"><strong>Order Summary Details</strong></h3>
<div style="margin-top: -25px;" class="pull-right">
<button type="button" class="btn btn-primary">Print Summary</button>
Print Label
</div>
</div>
</div>
</div>
</div>
I have a HTML page with forms ad content that i built with bootstrap which occupies full width and height of Opera,IE,Firefox and Chrome but when i run it in Edge it only occupies like 75 % ,only when i set the zoom to 125% in edge it renders the same way as it did in other browsers . Is there like any meta tag
like
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
to make Edge use the same settings like IE?
I was using this meta tag ,right after the header tag
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
my html page:
html {
min-height: 100%;
width: 100%;
height: 100vh;
}
body {
margin-top: 50px;
min-height: 100%;
width: 100%;
height: 100vh;
}
.fullwidth {
width: 100%;
}
.halfwidth {
width: 50%;
}
.fullscreen {
height: 100%;
width: 100%;
}
.halfscreen {
height: 50%;
width: 100%;
}
.verticalscrollbar {
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Best Taxi</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/site.css" />
<script src="js/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="shortcut icon" href="Images/favicon.ico" type="image/x-icon">
<link rel="icon" href="Images/favicon.ico" type="image/x-icon">
</head>
<body class="background-plain">
<div id="page">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Best Taxi</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>City Attractions</li>
<!--Code for drop down link ,sub menu-->
<!-- <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop Down Link
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>The Museum</li>
<li>The Palace</li>
<li>The Zoo</li>
</ul>
</li>-->
<li>Tour Packages</li>
<li>Pricing</li>
<li class="active">Contact Us</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<section id="Main" class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 fullscreen">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 halfscreen">
<div id="Address" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h2>Address</h2>
<hr />
<div id="col-lg-6 col-md-6" style="float: left;">
<h5>Address:Flat Number 1,</h5>
<h5>Building Number 1000</h5>
<h5>EverGlade Street,</h5>
<h5>Way Number 15678,</h5>
<h5>DownTown,Thimphu</h5>
<h5>Bhutan</h5>
<h5>Phone:0000000000</h5>
<h5>Mail:info#besttaxi.com</h5>
</div>
<div id="AddressImage" class="col-lg-6 col-md-6 visible-lg visible-md">
<img src="Images/taxi_mail.png" class="img-responsive" />
</div>
</div>
<div id="ContactUsForm" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<form>
<h2>Contact Us</h2>
<hr />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Name:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactName" type="text" class="form-control" required />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Email:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactEmail" type="text" class="form-control" required />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Subject:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<input id="ContactSubject" type="text" class="form-control" required placeholder="joe#gmail.com" />
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
<h5>Message:</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<textarea rows="5" cols="70" class="form-control"></textarea>
</div>
<br />
<br />
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"></div>
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-8">
<br />
<button type="submit" class="btn btn-default btn-yellow">Submit</button>
</div>
</form>
</div>
</div>
<div id="AddressMap" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 halfscreen">
<br />
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3539.890031078142!2d89.6358250609653!3d27.47268275781882!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1485174584064" class="fullwidth" height="260"></iframe>
</div>
<hr />
</section>
<footer class="container navbar-fixed-bottom hidden-xs hidden-sm">
<p class="hidden-xs hidden-sm">Copyrights © 2017 Best Taxi rights reserved | Developed by Nakki </p>
</footer>
</div>
</body>
</html>
I'm attempting to embed a search form at the right side of a panel heading:
<div class="panel-heading">
<h3 class="panel-title">Results <span class="badge">6</span></h3>
<form class="form-inline pull-right" role="search" method="get" action="/tbl">
<div class="form-group">
<input type="text" name="criteria" class="form-control" value="<%= params[:criteria] if params[:criteria] %>" placeholder="<%= params[:criteria]? params[:criteria] : 'Enter search criteria (e.g. FOOBAR_%)' %>">
<div class="input-group-btn">
<button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
Unfortunately, I'm having alignment issues:
In Safari (8.0.3):
In Firefox (35.0.1):
Is there a way to do this, preferably without custom CSS?
JSFiddle
Almost, see this fiddle
I put the heading and search box into col divs, but id have to add a little padding to he title to get it to line up with the search box
CSS:
.padFix{
padding-top:8px;
}
HTML:
<div class="panel-heading ">
<div class="row">
<div class="col-sm-6">
<h3 class="panel-title padFix">Results <span class="badge">6</span></h3></div>
<div class="col-sm-6">
<form role="search" method="get" action="/tbl">
<div class="input-group">
<input type="text" name="criteria" class="form-control" value="<%= params[:criteria] if params[:criteria] %>" placeholder="<%= params[:criteria]? params[:criteria] : 'Enter search criteria (e.g. FOOBAR_%)' %>">
<div class="input-group-btn">
<button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
Here am sharing my answer, this might be useful
JS Fiddle
Here is the code
HTML
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">
Header
</h4>
<div class="btn-group pull-right">
<input type="text" class="custom_input">
<button class="btn btn-success pull-right" style="height: 30px;">
Search
</button>
</div>
</div>
<div class="panel-body">
Content Body
</div>
<div class="panel-footer">
Content Footer
</div>
</div>
</div>
</div>
CSS
.custom_input {
padding: 4px 5px;
border: 1px solid #d3e0e9;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-right: none;
height: 30px;
}
thank You :-)
I was wondering if anyone could tell me how to space out 6 buttons. I want is so that three of the buttons are at the top, while the other 3 are below the top row. So basically it would be two separate rows of aligned buttons.
I know this seems fairly easy but I'm having a difficult time with it. Any help is really appreciated. Thanks.
You could simply do something as such:
<div id="button-wrapper">
<div class="button-row">
<input type="button" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
</div>
<div class="button-row">
<input type="button" value="button4" />
<input type="button" value="button5" />
<input type="button" value="button6" />
</div>
</div>
You could do something like
#top
{
width: 100%
}
#bottom
{
width: 100%;
}
.button
{
float: left
width: 33%;
}
<div id="top">
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
</div>
<div id="bottom">
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
<div class="button">
<!-- code for button here -->
</div>
</div>
You can play with the button div width and add margins/padding ect.
To ensure column alignment, you could add a column class to each, and specify a width in that column class.
HTML:
<div id="button-wrapper">
<div class="button-row">
<input type="button" value="blah blah" class="c0"/>
<input type="button" value="lorem ipsum" class="c1"/>
<input type="button" value="really long button label" class="c2"/>
</div>
<div class="button-row">
<input type="button" value="button4" class="c0"/>
<input type="button" value="button5" class="c1"/>
<input type="button" value="button6" class="c2"/>
</div>
</div>
CSS:
.c0{
width: 80px;
}
.c1{
width: 100px;
}
.c2{
width: 150px;
}