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/
Related
I want my display to look like this.
But instead, it looks like this
My Code goes like this.
HTML
<body>
<div class="top">
<div class="left">
<h1>TOP LEFT</h1>
</div>
<div class="right">
<h1>TOP RIGHT</h1>
</div>
</div>
<div class="bottom">
<h1>BOTTOM</h1>
</div>
</body>
CSS
body{
text-align:center
}
.top{
position:relative;
}
.left{
position:absolute;
width:50%;
}
.right{
position:absolute;
width:50%;
left:50%;
}
.bottom{
position:relative;
}
What necessary changes should I make in my code. I want to keep things dynamic and not specify the height of divs in pixels.
Don't. Positioning is unsuited to this type of layout.
Use the right tool for the job. Use flexbox to put the two elements side-by-side, and let normal flow handle the rest.
h1 {
text-align: center;
}
.top {
display: flex;
}
.top>div {
flex: 0 0 50%;
}
<div class="top">
<div class="left">
<h1>TOP LEFT</h1>
</div>
<div class="right">
<h1>TOP RIGHT</h1>
</div>
</div>
<div class="bottom">
<h1>BOTTOM</h1>
</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 have two elements on my page which I wish to align side by side, what would be the best way of going about this, and can somebody explain the best way to go about coding it when you want to align elements together.
In this example I want the video to take up most of the room say 3/4 and the chart to be in the remaining 1/4. (Bootstrap is loaded on this page)
Any suggestions?
This is what it currently looks like:
http://i1057.photobucket.com/albums/t390/Alexwileyy/element_zps066ecdd2.png
(I have outlined the video in a color so I can see the perimeters)
This is my HTML code for the two elements:
<!--Video Section-->
<div class="video">
<div class="container">
<div class="video-element">
<iframe width="460" height="215" src="//www.youtube.com/embed/PdABTJhRTLY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!--End Of Video Section-->
<!--Start of chart-->
<div class="container">
<div class="chart">
<div class="chart-cont">
<h1 id="chart-header">Charts</h1>
</div>
<div class="chart-cont">
<h1>1</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h1>2</h1>
<img src="http://savegameonline.com/wp-content/uploads/2013/05/CoD-Ghosts-banner.png">
View Review</td>
</div>
<div class="chart-cont">
<h1>3</h1>
<img src="http://bit.ly/1tSu4iq">
View Review</td>
</div>
<div class="chart-cont">
<h1>4</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h4>View More..</h4>
</div>
</div>
</div>
<!--End of chart-->
This is my CSS code for my two elements:
.chart {
background-color:white;
width:400px;
margin-bottom:10px;
margin-top:-35px;
}
.chart-cont * {
display:inline;
}
.chart-cont {
padding:10px;
box-shadow: 0 2px 5px rgba(26,26,26,0.75);
text-align:center;
}
.chart-cont img {
width:180;
height:60px;
}
.chart-cont h1 {
vertical-align:middle;
}
Any answers greatly appreciated.
First if you want to work with 3/4 of the screen, start using a percentage as width.
First create a content Div, then a LeftContent and a RightContent div.
Like this:
<div class="Content">
<div class="LeftContent">
</div>
<div class="RightContent">
</div>
</div>
CSS:
.Content{
width:100%;
margin:10px;
padding:10px;
}
.LeftContent{
width:60%;
margin:10px;
float:left;
}
.RightContent{
width:30%;
margin:10px;
float:right;
}
Now you can place the video left, and the other images right, adjust how you want to with padding, margin and width percentage, test with making your window smaller (how it looks like on smaller screens).
Notice to make use of float left and float right.
Here is JSFiddle link: http://fiddle.jshell.net/7pp7q/1/
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.
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.. ;)