Example (with "OR" as text):
The idea is that on collapse of columns—i.e.: view on mobile sized-screen—it will appear betwixt submit and Click me.
How do I add some text onto the divider between rows?
Why don't you use a .span between your two forms ?
<div class="container">
<div class="row">
<div class="span5">
form 1
</div>
<div class="span2">OR</div>
<div class="span5">
form 2
</div>
</div>
</div>
Demo (jsfiddle)
<style>
.wrapper{
width:900px;
margin:0 auto;}
.left{
min-height:300px;
width:400px;
background-color:#9F0;
float:left;}
.right{
min-height:300px;
width:400px;
background-color:#9F0;
float:right;}
.mid{
padding-top:150px;
padding-left:40px;
min-height:150px;
width:60px;
float:left;
background-color:#C00;}
</style>
<body>
<div class="wrapper">
<div class="left">SUBMIT CONTENT HERE</div>
<div class="mid">OR</div>
<div class="right">CLICK ME CONTENT HERE</div>
</div>
I think this can help you. now you can style it if you want to add vertical bar on mid you can add that bar as a background image
then you can style it or add any DIV tags to it Its your wish.. ;)
Related
I have a page with some divs. My page is pretty dynamic where I am showing and hiding divs based on user input.
I want a footer to always appear at the bottom and to have the other divs above it appear in a scroll. Since my data is populated asynchronously, my view loads but then once the content is injected onto the page, my footer seems to move
Here's a simple example of what I'm trying to do:
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
try to add positions for footer
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
in CSS
.footer
{
position:absolute;
bottom:0px;
}
in HTML
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
in CSS
div.parent{
position:relative;
}
div.footer
{
position:absolute;
bottom:0px;
}
Looks like you are looking for the fixed footer at bottom. You can use position:fixed and apply positions like below.
.footer {
position:fixed;
height:20px;
background:#ccc;
bottom:0;
left:0;
right:0;
text-align:center;
}
<div class="parent">
<div class="dynamic-div1">async div1</div>
<div class="dynamic-div2">async div2</div>
<div class="footer">Always appear at bottom</div>
</div>
I have made a very simple layout in CSS in ASP.net.
HTML
<div id="header">
<h1>Header</h1>
</div>
<div id="nav">
<h1> Site
</div>
<div id="section">
<h1>Content</h1>
</div>
<div id="footer">
Footer
</div>
CSS
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
text-align:center;
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
jsfiddle
What I want is that if I change the size of footer,header or content area in my design view of ASP.net designer all other areas resize themselves accordingly.
that is increasing or decreasing any section has cascading effect on all other areas.
For example if I increase the size of footer then size of content and header should make their size at par with the footer.
How this could be done?
So you basically want a responsive design? I have added a wrapper div around your contents, when you increase the width of that, width of other elements will also get increased as the width is given in percentage. Please see fiddle for more details https://jsfiddle.net/ptgcfgks/1/
<div id="wrapper">
<div id="header">
<h1>Header</h1>
</div>
<div id="nav">
<h1> Site
</div>
<div id="section">
<h1>Content</h1>
</div>
<div id="footer">
Footer
</div>
</div><!--wrapper-->
I´m trying to do responsive tiles grid with static tile width.
I don´t speak English well, so I tried to draw my problem.
Image is here
I need have tiles grid in the middle, but don´t centring single tile.
I hope you understand what I need, and thank you for any reply.
I guess this is what you want. Check this Fiddle
HTML:
<div class="wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
CSS:
.wrapper{
width:80%;
border:solid 1px #000;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
.box{
margin:5px;
height:150px;
width:100px;
float:left;
border:solid 1px #000;
}
I've had page layout made via an Html table in my home page.
the lay out was fine , though i was reading that tables are not the way to go (SEO and maybe not only that)
so i need to use divs, the layout is as follows
(i am in RTL Lang /style /direction)
My Question is
Could anyone Try and simplify how to or give an example for a lay out like that
and in more detailed explained :
i think "my life" was so simple, when i had to understand the structure of a table
so, for illustration purpose take this markup:
<table>
<tr> <td>1</td> <td>2</td> </tr>
<tr> <td>3</td> <td>4</td> </tr>
</table>
here you don't need to think much to analyze that this will be 2 by 2 table
but when it comes to divs i get no results laying them as i plan to
i would like to know how do i make that simple as it was with a table for me .
2 now that i am trying to achieve that layout via divs (no table involved )
and to make it work so that layout will be Cross Browser, meaning will look same
at least for the 3 main browsers IE8&9 / FF / Chrome (only my preference)
thanks in advance
I tried hard to make template like what you want.I hope you will like it.See my layout
by division tag.I am attaching a screen shot as well that is created on the base of
my div logic.I think it will be clear for you.
<div id="main" >
<div style="background-color:Blue; text-align:center; ">
Main banner
</div>
<div style="background-color:Green; text-align:center; " >
Top menu
</div>
<div style="background-color:Gray; text-align:center; width:300px; float:right; height:200px; " >
Right side menu
</div>
<div style="background-color:Red; text-align:center; height:200px;" >
<div style="background-color:Fuchsia; text-align:center; width:300px; float:right; height:100px; ">
contend2
</div>
<div style="background-color:Lime; text-align:center;height:100px; ">
contend1
</div>
<div style="background-color:Aqua; text-align:center; width:300px; float:right; height:100px; ">
contend4
</div>
<div style="background-color:Orange; text-align:center;height:100px; ">
contend3
</div>
</div>
<div style="background-color:Silver; text-align:center; " >
Footer
</div>
</div>
**In case if you want external css then use**
<div id="main" >
<div id="mainbanner">
Main banner
</div>
<div id="topmenu" >
Top menu
</div>
<div id="rsm" >
Right side menu
</div>
<div id="maincontend" >
<div id="c2" >
contend2
</div>
<div id="c1">
contend1
</div>
<div id="c4">
contend4
</div>
<div id="c3">
contend3
</div>
</div>
<div id="footer">
Footer
</div>
</div>
**CSS................**
#Main
{
}
#mainbanner
{
background-color:Blue;
text-align:center;
}
#topmenu
{
background-color:Green;
text-align:center;
}
#rsm
{
background-color:Gray;
text-align:center;
width:300px;
float:right;
height:200px;
}
#maincontend
{
background-color:Red;
text-align:center;
height:200px;
}
#c2
{
background-color:Fuchsia;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c1
{
background-color:Lime;
text-align:center;
height:100px;
}
#c4
{
background-color:Aqua;
text-align:center;
width:300px;
float:right;
height:100px;
}
#c3
{
background-color:Orange;
text-align:center;
height:100px;
}
#footer
{
background-color:Silver;
text-align:center;
}
You can't ask for complete layouts, but I wrote two tutorials that will definitely help you acquire the skill required to make them: How to Position in CSS and Create a Fixed ('Sticky') Footer with CSS.
Check this
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
</div>
<div id="navigation">
<p>This is the Menu</p>
</div>
<div id="leftcolumn">
<div class="row">
<div>1st block</div>
<div>2nd block</div>
</div>
<div class="row">
<div>3rd block</div>
<div>4th block</div>
</div>
</div>
<div id="rightcolumn">
sfsf
</div>
<div id="footer">
<p>This is the Footer</p>
</div>
</div>
DEMO
HTML-Cleaner has a nice feature to replace HTML tables with DIVs: http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/
Make sure you include the css code supplied.
I want to make two columns page with box one (box1) and box two(box2). Then just after h2, I want to make two columns inside box2 with box2.1 and box2.2.
Here is my HTML code
<body>
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
</body>
And here is my CSS part.
#contentLeft{
float:left;
width:300px;
After that, I have no idea what to do. Tried number of ways, it didn't work. Could you please help here?
It may help you:
HTML:
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
CSS:
#box1{
float:left;
widht:50%;
background:#FF0000;
}
#box2{
float:left;
width:50%;
background:#00FF00;
}
#box21{
float:left;
width:50%;
background:#0000FF;
}
#box22{
float:left;
width:50%;
background:#e4e4e4;
}
Just for your reminder, don't use dot(.) in id or class name. You can also simplified the CSS by using the same class name in all div.
.box{
float:left;
width:50%;
}
OR the following code:
#box1, #box2, #box21, #box22{
float:left;
width:50%;
}
See the example : http://jsfiddle.net/N4hMw/2/