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
Related
I have a div as a parent div containing dynamically created children div as much as,but my problem is i want the children div to be inline so users can scroll horizontal to see more of the children div as they scroll but my is scrolling vertically instead of horizontal and i try setting the overflow-y to hidden but still not the children div are not inline once.
<div id="frnd_r_s_c">
<?php
$sqlfrnds = $db_connect->prepare("select * from users where id!=?");
$sqlfrnds->bind_param('s',$row["id"]);
$sqlfrnds->execute();
$result = $sqlfrnds->get_result();
while($rows = $result->fetch_assoc()){
?>
<div class="suggest-frnd">
<div id="s_f_exit"> ×</div>
<div class="suggest-frnd-img">
<img src="<?php ?>" >
</div>
<div class="suggest-frnd-n-add">
<div id="suggest-frnd-n"><?php echo $rows["u_firstname"]." ";echo $rows["u_othernames"]; ?></div>
<div>
<form id="s_frnd_form">
<input type="hidden" name="s_frnd_id" value="<?php echo $rows['id']; ?>">
<input type="submit" name="add_frnd" value="ADD">
</form>
</div>
</div>
</div>
<?php
}
?>
<div class="clear"></div>
</div>
/*style for parent div*/
#frnd_r_s_c{
width:450px;
height:200px;
background:blue;
margin-left:20px;
overflow-y:hidden;
overflow-x:scroll;
}
/*floating the children div left to be able to display inline*/
#frnd_r_s_c >div{
float:left;
}
this is the dynamic create ones
<div id="frnd_r_s_c">
<div class="suggest-frnd">
<div id="s_f_exit"> ×</div>
<div class="suggest-frnd-img">
<img src="" >
</div>
<div class="suggest-frnd-n-add">
<div id="suggest-frnd-n">ekene gabriel</div>
<div><form id="s_frnd_form">
<input type="hidden" name="s_frnd_id" value="5">
<input type="submit" name="add_frnd" value="ADD">
</form></div>
</div>
</div>
<div class="suggest-frnd">
<div id="s_f_exit"> ×</div>
<div class="suggest-frnd-img">
<img src="" >
</div>
<div class="suggest-frnd-n-add">
<div id="suggest-frnd-n">ebuka gabriel</div>
<div><form id="s_frnd_form">
<input type="hidden" name="s_frnd_id" value="14">
<input type="submit" name="add_frnd" value="ADD">
</form></div>
</div>
</div>
<div class="suggest-frnd">
<div id="s_f_exit"> ×</div>
<div class="suggest-frnd-img">
<img src="" >
</div>
<div class="suggest-frnd-n-add">
<div id="suggest-frnd-n">kc kelvin</div>
<div><form id="s_frnd_form">
<input type="hidden" name="s_frnd_id" value="15">
<input type="submit" name="add_frnd" value="ADD">
</form></div>
</div>
</div>
<div class="suggest-frnd">
<div id="s_f_exit"> ×</div>
<div class="suggest-frnd-img">
<img src="" >
</div>
<div class="suggest-frnd-n-add">
<div id="suggest-frnd-n">ecellent chimezie</div>
<div><form id="s_frnd_form">
<input type="hidden" name="s_frnd_id" value="16">
<input type="submit" name="add_frnd" value="ADD">
</form></div>
</div>
</div>
<div class="suggest-frnd">
<div id="s_f_exit"> ×</div>
<div class="suggest-frnd-img">
<img src="" >
</div>
<div class="suggest-frnd-n-add">
<div id="suggest-frnd-n">ecellent chimezie</div>
<div><form id="s_frnd_form">
<input type="hidden" name="s_frnd_id" value="17">
<input type="submit" name="add_frnd" value="ADD">
</form></div>
</div>
</div>
<div class="clear"></div>
</div>
You can use white-space:nowrap in parent div and if it's possible to style child elements that generate dynamically then you even need to change it display from block to inline-block as below,
white-space CSS property determines how whitespace inside an element is handled.
#box{
width:100%;
height:250px;
background:black;
white-space:nowrap;
overflow-x:scroll;
}
#box > .b:first-child{
margin-left:0;
}
#box > .b{
width:500px;
height:200px;
margin-left:50px;
background:yellow;
display:inline-block;
}
<div id="box">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
did you hear about Flexbox? I think it can help you. Just add to the style for the parent div :
display: flex;
flex-wrap: nowrap;
more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I did not try it, just thought it might help you :-)
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 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.
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 -->
Having some nasty issues with IE6 and reading my div form layout, the html:
<form id="brochureForm" name="brochureForm" action="/how-it-works/request-a-brochure/" method="post">
<div class="row">
<div class="label">
<label for="szName">Name</label>
</div>
<div class="field">
<input type="text" name="szName" id="szName" value="#form.szName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szCompanyName">Company Name</label>
</div>
<div class="field">
<input type="text" name="szCompanyName" id="szCompanyName" value="#form.szCompanyName#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szAddress">Address</label>
</div>
<div class="field">
<input type="text" name="szAddress" id="szAddress" value="#form.szAddress#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTown">Town/City</label>
</div>
<div class="field">
<input type="text" name="szTown" id="szTown" value="#form.szTown#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szPostcode">Postcode</label>
</div>
<div class="field">
<input type="text" name="szPostcode" id="szPostcode" value="#form.szPostcode#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szTelephone">Tel</label>
</div>
<div class="field">
<input type="text" name="szTelephone" id="szTelephone" value="#form.szTelephone#" />
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="label">
<label for="szEmail">E-mail</label>
</div>
<div class="field">
<input type="text" name="szEmail" id="szEmail" value="#form.szEmail#" />
</div>
<div class="clear"></div>
</div>
<div class="submitrow">
<input type="image" name="szSubmit" id="szSubmit" src="/images/form/submit.gif" class="submitRO" />
</div>
</form>
And then the CSS:
.row {width:314px;margin:0 0 8px 0;}
.row .label {width:103px;padding:3px 16px 0 0;float:left;text-align:right;}
.row .field {width:195px;float:left;}
.submitrow {width:314px;text-align:right;padding:3px 0 0 0;}
Working fine in IE8/7, Firefox, etc.
Also, as a rule of thumb when dealing with IE6, try adding display:inline to your floating divs
IE6 sometimes doesnt get margins and paddings right. Try to reduce them a few pixels.