I a trying to stack 3 div's side by side. Here's a sample div
<!-- This is first div -->
<div id="divone" style="text-align: center;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
</div>
<!-- Similarly I need two more divs to be aligned sidebyside with div one -->
How can I do it using inline CSS? The width of each div can be 200px with no limit on height.
OUTPUT Required
-------------------- -------------------- --------------------
DIV ONE DIV TWO DIV THREE
-------------------- -------------------- --------------------
FORM ELEMENT FORM ELEMENT FORM ELEMENT
-------------------- -------------------- --------------------
Just because you can't change the stylesheet, doesn't mean you have to use ugly inline styles.
Add this to your <head>:
<style>
.three-columns{
width: 100%; /* or any width you like */
}
.three-columns .column{
float: left;
width: 33%; /* or less if you're using margins, padding, borders, etc */
}
</style>
Then in the page,
<div class="three-columns">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
You can do all your additional css inside a style tag in the head. (Technically, I think you can use it outside the header, but try not to)
Try this:
<ul style="list-style: none;">
<li>
<div id="divone" style="">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
</div>
</li>
<li>
<div id="divtwo" style="">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
</div>
</li>
<li>
<div id="divthree" style="t">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
</div>
</li>
Demo here:
http://jsfiddle.net/7MZqN/
Set display: inline-block; to have the divs side-by-side, as follows:
<div id="divone" style="text-align: center; display: inline-block; width: 200px;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
</div>
<div id="divtwo" style="text-align: center; display: inline-block; width: 200px;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
</div>
<div id="divthree" style="text-align: center; display: inline-block; width: 200px;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
</div>
<div id="divone" style="text-align: center; width:33.33333%; float:left;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span></div>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
<div id="divtwo" style="text-align: center; width:33.33333%; float:left;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span></div>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
<div id="divthree" style="text-align: center; width:33.33333%; float:left;">
<span style="font-size: 11pt;"><strong>Some Message Here</strong></span></div>
<div style="text-align: center;">
<form action="https://www.somesomesomesome.com" method="post">
</form>
</div>
<div style="clear:both;"></div><!-- this is a clearfix div -->
DEMO: http://jsfiddle.net/EnkP5/
UPDATE: i just saw where you wanted the width to be 200px; Change the width from 33.33333% to 200px;
Make sure that the div that all three of these other divs sit in, are more than 600px wide.
Related
I have a page using a masterpage in asp.net 4.0. My masterpage has header which has a search box. Header has css position fixed and have z-index 10.
I am trying to create a search instruction which will open when user types anything. my instruction box do not show as floatig over header instead it opens inside header and expands it. Here are my css and html
header {
width:100%;
display:inline-block;
background-color:#ef4023;
position:fixed;
z-index:10;
}
header #Guide {
width: 100%;
z-index: 5;
margin-right: -1px;
position:relative;
background: #eee;
border: 1px solid #ccc;
}
<header>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-4">
<div class="logo">
<img src="images/logo.png" alt="logo" class="img-responsive" />
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-8">
<div class="col-md-6">
<!--SearchBarStart-->
<div ng-controller="MyCtrl">
<form>
<h3>Search Here </h3>
<input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" />
<div class="list-group" id="Guide" ng-show="showLinks">
<a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)">
<div class="input-group">
<span class="fa fa-suitcase"></span><span style="padding-left: 20px">instruction goes here</span>
</div>
</a>
</div>
</form>
</div>
</div>
</div>
</header>
You have to use position: fixed also on the instruction box, with according position settings. (relative will put it into the document flow, thereby taking up space, and absolute won't work since you don't have a relative parent for it.)
header {
width: 100%;
display: inline-block;
background-color: #ef4023;
position: fixed;
z-index: 10;
}
header #Guide {
width: 100%;
z-index: 15;
margin-right: -1px;
position: fixed;
top: 110px;
left: 0px;
background: #eee;
border: 1px solid #ccc;
}
<header>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-4">
<div class="logo">
<img src="images/logo.png" alt="logo" class="img-responsive" />
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-10 col-xs-8">
<div class="col-md-6">
<!--SearchBarStart-->
<div ng-controller="MyCtrl">
<form>
<h3>Search Here </h3>
<input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" />
<div class="list-group" id="Guide" ng-show="showLinks">
<a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)">
<div class="input-group">
<span class="fa fa-suitcase"></span><span style="padding-left: 20px">instruction goes here</span>
</div>
</a>
</div>
</form>
</div>
</div>
</div>
</header>`
Im trying to make an image header with a full width , but the image always take the container width and not 100% width (even if i put the div outside the container). i have tried almost everything and nothing worked and this answers here didnt help. it may be done if i change the .container width in a custom css but this will ruin the entire site design.
code:
<body style="background-color: #eee">
<div class='container-fluid'>
<div class="row" style='width: 100%'>
<div class='' style='height: 10px; margin: 0 0;padding: 0 0 ; width:100%'>
<img class='' src="images/shape1.png" style='height: 100%; width:100%; margin-bottom: 13px'>
</div>
</div>
<div class='row text-center rowStyle' >
<img id='leftLogo' src="images/kslogo.png">
<img id='rightLogo' src="images/kglogo.png">
<div class='searchContainer'>
<table class='table-responsive searchTable'>
<tr>
<td width='15%'>
<img class='searchButton' src="images/btn-search.png" >
</td>
<td width='85%'>
<input type='text' class="form-control searchInput">
</td>
</tr>
</table>
</div>
<div class="row " style="margin-top: 40px; margin-left: auto !important;margin-right: auto !important ; width: 76%" >
<div class="text-center col-md-4 items" >
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles03.png" alt="Generic placeholder image">
</div><!-- /.col-lg-4 -->
<div class="text-center col-md-4 items" >
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles01.png" alt="Generic placeholder image">
</div><!-- /.col-lg-4 -->
<div class=" text-center col-md-4 items" style=' position: relative ;'>
<img src='images/btnlog-in.png' class='buttonsLocation'>
<img class="" src="images/Aricles02.png" style=''>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</div>
</div>
<div style='height: 80px; margin-top: 84px;padding: 0 0 ; width:100%; background-color: #e3e3e3;'>
</div>
</body>
EDIT: added full code + screenshot
Im using bootstrap3
any help would be appreciated,
Thanks
May it be, that you forget to close the "<div class='container-fluid'>" tag?
the class .container-fluid has the left and right padding set to 15px. So if you don't need that just override it.
Try:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 10px; padding-left: 0; padding-right: 0;">
<img src="images/shape1.png" style="height: 100%; width:100%; margin-bottom: 13px">
</div>
</div>
I would like to combine div table with Ajax.BeginForm:
and what it outputs looks like this:
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell"><p>Pos</p></div>
<div class="Cell"><p>Value</p></div>
<div class="Cell"><p>Action</p></div>
</div>
<div class="Row" id="Row_1">
<form>
<div class="Cell"><p>1</p></div>
<div class="Cell"><p>Hello</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
<div class="Row" id="Row_2">
<form>
<div class="Cell"><p>2</p></div>
<div class="Cell"><p>World</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
Demo
But each row is display only in the first column. How can I fix that?
Thx
Remove the Row divs and promote your forms to have the .Row class
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell"><p>Pos</p></div>
<div class="Cell"><p>Value</p></div>
<div class="Cell"><p>Action</p></div>
</div>
<form class="Row" id="Row_1">
<div class="Cell"><p>1</p></div>
<div class="Cell"><p>Hello</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
<form class="Row" id="Row_2">
<div class="Cell"><p>2</p></div>
<div class="Cell"><p>World</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
replace cell class from css with
.Cell
{
float:left;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
width: 200px;
}
check example here
I'm having an issue where only certain divisions are overlapping each other vertically. My second gray "pageBreak" is mounting atop my "subHeader" regardless of padding fixes and trying to staying on top of clearing floats.
I've tried overflow, clearfix, old-school "clear: both;", and I'm still having the same problem. (I assume it's a float-related issue.) I even tried (as you can see in the code) using relative and absolute positioning to get my second "pageBreak" below my "subHeader" as it should be but no positioning value even moves the second "pageBreak." I also have my other divs below these referenced sneaking up to the top of my "subHeader." I rather not use these fixes as I want the CSS to be as dynamic as possible for obvious reasons.
I feel like the code is pretty neat but I'm obviously missing something fairly obvious. Any help would be greatly appreciated!
I've included the HTML and CSS of the page for your review.
HTML:
<div class="container">
<div class="header">
<div style="float:left">
<img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px">
</div>
<div style="float: right;">
<h2>Company slogan.</h2>
</div>
<div style="clear: both;"></div>
</div>
<div class="pageBreak">
</div>
<div class="subHeader">
<div style="float: left; width: 400px; text-align: left;">
</div>
<div class="form" style="float: right; width: 300px;">
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div>
<label style="float: left;" for='username' >School Email</label>
<input style="float: right;" type='text' name='username' id='username' maxlength="50" /></br></br>
</div>
<div style="clear: both;">
<div>
<label style="float: left;" for='password' >Password</label>
<input style="float: right;" type='password' name='password' id='password' maxlength="50" />
</div>
<div style="clear: both;"></div>
<p style="font-size: 70%; text-align: right; line-height: 8px;">Forgot your password?</p>
<p style="font-size: 70%; text-align: right; line-height: 8px;">Want to register?</p>
<div>
<input type='submit' name='Submit' value='Log In' style="float: right;"/>
</div>
</form>
</div>
<div style="clear: both;"></div>
</div>
<div class="pageBreak" style="top: 400px;">
</div>
CSS:
.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
background-color: white;
box-shadow: 10px 10px 40px #888;
}
.pageBreak {
margin-left: auto;
margin-right: auto;
width: 900px;
border-top: rgb(238,238,238) 3px solid;
}
.header {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}
.subHeader {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}
Don't know if this will solve the issue however it is too large for a comment...
Your HTML is malformed, you are missing a few closing tags. This could be a copy error for the last tag, however the first looks to be genuine.
See code below (I have commented where the corrections are needed):
<div class="container">
<div class="header">
<div style="float:left">
<img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px">
</div>
<div style="float: right;">
<h2>Company slogan.</h2>
</div>
<div style="clear: both;">
</div>
</div>
<div class="pageBreak">
</div>
<div class="subHeader">
<div style="float: left; width: 400px; text-align: left;">
</div>
<div class="form" style="float: right; width: 300px;">
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div>
<label style="float: left;" for='username'>School Email</label>
<input style="float: right;" type='text' name='username' id='username' maxlength="50"/></br></br>
</div>
<div style="clear: both;">
<div>
<label style="float: left;" for='password'>Password</label>
<input style="float: right;" type='password' name='password' id='password' maxlength="50"/>
</div>
<div style="clear: both;">
</div>
<p style="font-size: 70%; text-align: right; line-height: 8px;">
Forgot your password?
</p>
<p style="font-size: 70%; text-align: right; line-height: 8px;">
Want to register?
</p>
<div>
<input type='submit' name='Submit' value='Log In' style="float: right;"/>
</div>
</div> <!-- HERE -->
</form>
</div>
<div style="clear: both;">
</div>
</div>
<div class="pageBreak" style="top: 400px;">
</div>
</div> <!-- HERE -->
You have line-height: 8px in your code. increase the line-height of the paragraphs and decrease your divisions widths and omit some float properties.
see jsfiddle
Below markup will solve issues in you layout.
<!-- CONTAINER -->
<div class="container">
<!-- HEADER -->
<div class="header">
<div style="float:left"><img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px"></div>
<div style="float: right;"><h2>Company slogan.</h2></div>
<div style="clear: both;"> </div>
</div>
<!-- / HEADER -->
<!-- 1ST PAGE BREAK -->
<div class="pageBreak"> </div>
<!-- / 1ST PAGE BREAK -->
<!-- SUBHEADER -->
<div class="subHeader">
<div class="form" style="float: right; width: 300px;">
<!-- FORM -->
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div>
<label style="float: left;" for='username' >School Email</label>
<input style="float: right;" type='text' name='username' id='username' maxlength="50" /></br></br>
</div>
<div style="clear: both;"> </div>
<div>
<label style="float: left;" for='password' >Password</label>
<input style="float: right;" type='password' name='password' id='password' maxlength="50" />
</div>
<div style="clear: both;"> </div>
<p style="font-size: 70%; text-align: right; line-height: 8px;">Forgot your password?</p>
<p style="font-size: 70%; text-align: right; line-height: 8px;">Want to register?</p>
<div><input type='submit' name='Submit' value='Log In' style="float: right;"/></div>
</form>
<!-- /FORM -->
</div>
<div style="clear: both;"> </div>
</div>
<!-- / SUBHEADER -->
<!-- 2ND PAGE BREAK -->
<div class="pageBreak"> </div>
<!-- / 2ND PAGE BREAK -->
</div>
<!-- / CONTAINER -->
In the layout below, I would like div1 and div2 to in the same row, but move div3 in next row (below div1). Thanks in advance.
<html>
<body>
<div style="width:50%;">
<div id="div1" style="float:left;
background-color:red;
vertical-align: bottom;">
<label> This is my label</label><br>
<input type ="text">
</div>
<div id="div2" style="padding-left:10px;
padding-right:0px;
float:left;
background-color:green;
vertical-align: bottom;">
<label> </label><br>
<button id="btn" >My button</button>
</div>
<div id="div3" style="background-color:yellow;">This is error</div>
</div>
</body>
Use <br style="clear: both;">
<html>
<body>
<div style="width:50%;">
<div id="div1" style="float:left; background-color:red; vertical-align: bottom;">
<label> This is my label</label><br>
<input type ="text">
</div>
<div id="div2" style="padding-left:10px;padding-right:0px;float:left; background-color:green; vertical-align: bottom;">
<label> </label><br>
<button id="btn" >My button</button>
</div>
<br style="clear: both;">
<div id="div3" style="background-color:yellow; float:none" >This is error</div>
</div>
</body>
jsFiddle