I am trying to obtain the following responsive layout
DIVs
with no luck. Can someone please help me ?
DIV1 has width = 100%,
DIV 2, DIV3 and DIV4 have all float:left while DIV5 has float:right; but the layout that I achieve is wrong :(
My attempt to create the image using flexbox.
https://codepen.io/goughjo02/pen/GBLdXW
N.B. instead of float: right;, you can use margin-left: auto; - that has the effect of automatically allocating all free space to the left of the div.
There you go!
I followed your picture.
#wrap {
border-style:solid;
border-width:thin;
padding: 10px;
min-height:50px;
min-width:100%
display: flow-root;
}
#innerwrap{
display: inline-grid;
}
.div_left {
min-width:150px;
max-width:150px;
border-style:solid;
border-width:thin;
text-align:center;
float:left;
margin:5px 10px 5px 10px;
padding: 15px;
}
#div2 {
min-width:150px;
max-width:150px;
border-style:solid;
border-width:thin;
text-align:center;
float:left;
padding: 50px 15px 50px 15px;
}
#right {
min-width:150px;
max-width:150px;
border-style:solid;
border-width:thin;
text-align:center;
float: right;
margin-top:5px;
padding: 15px;
}
Div1
<div id="wrap">
<div id="div2">Div2</div>
<div id="innerwrap">
<div class="div_left">Div3</div>
<div class="div_left">Div4</div>
</div>
<div id="right">Div5</div>
</div>
Related
I have an iframe inside a class in the center of my page. If you click any of the two radio buttons at the top, the form expands depending on which one you select. If the form is floated right or left, it will expand when one of these buttons is pushed and the gray area below it (the employer and freelancer text section) will move down on the page. When I align the form in the center of the page, I can't get it to have the property associated with floating that moves the rest of the page down. Instead, it simply covers up the gray background with text area. My site is up at avidest.com/new. How can I make the form stay in the center but behave like it were floating? Here is my css:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;}
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff;
border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier */
border-radius: 10px;margin-left: auto;margin-right: auto;}
.body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; }
.body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}
And here is the html:
<div class="main>
<div class="slider">
<div class="gallery">
<div class="formbox"> form is here </formbox>
</div>
</div>
<div class="body">
<div class="body_main_page">Freelancer Text is here</div>
<div class="body_main_page">Employer text is here</div>
</div>
</div>
Thanks
Try to change your CSS like this:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;}
.slider { background: transparent; margin:0 auto; padding:0; min-height:420px;}
.slider .gallery { margin:0 auto; width:980px; min-height:420px; padding:0;}
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff;
border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier */
border-radius: 10px;margin-left: auto;margin-right: auto;}
.body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; }
.body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}
Don't provide a fixed height if you want to have e flexible height...
I have a three divs and I am giving them absolute positioning. However, they are not staying inside my container div.
Here is the code:
<body >
<div id="container">
<div id="col1"> testing one</div>
<div id="col2"> testing two</div>
<div id="col3"> testing three</div>
<br/><p/>ksjdlfkjsldkjfl;s
Here is the CSS for my three divs and my container:
div#container {
position:reletive;
border-spacing: 10px;
margin: 100px 80px auto;
padding: 0 100px10px;
background-color: #EEEEEE;
width: 800px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border: 1px solid;
}
div#col1{
position:absolute;
float: left;
left:0;
width:220px;
background-color :red;
}
div#col2{
position:absolute;
float: left;
left:220px;
width:220px;
background-color :yellow;
padding: 10px auto ;
}
div#col3{
position:absolute;
float: left;
left:500px;
width:100px;
background-color :green;
padding: 10px auto;
}
I think, firstly, the position of container div should be "relative" , not the "reletive".
Secondly, I think you should use "relative" position instead of "absolute".
I've been trying to create a site with the following structure:
But I can't seem to get the header correct (e1 left, e2 centered, e3 right). I want the three elements e1, e2 and e3 to be left, middle and right positioned. This is what I'm trying:
<div id="wrapper">
<div id="header">
<div id="header-e1">
1
</div>
<div id="header-e2">
2
</div>
<div id="header-e3">
3
</div>
</div>
<div id="nav">
links
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
With this css:
#wrapper
{
width: 95%;
margin: 20px auto;
border: 1px solid black;
}
#header
{
margin: 5px;
}
#header-e1
{
float: left;
border: 1px solid black;
}
#header-e2
{
float: left;
border: 1px solid black;
}
#header-e3
{
border: 1px solid black;
}
#nav
{
margin: 5px;
}
#content
{
margin: 5px;
}
#footer
{
margin: 5px;
}
Can someone give me tips to what I can do? The structure is going to be used on a mobile website.
UPDATE
The code I have above gives me this:
But I want the 2 centered and the 3 on the right side. I don't want to set the width to a percent because the content in the elements may vary, meaning it may be 20/60/20 - 10/80/10 - 33/33/33 or something else.
Utilize the Magic of Overflow: Hidden
If you can swap the html position of 2 & 3 like so:
<div id="header-e1">
1 is wider
</div>
<div id="header-e3">
3 is also
</div>
<div id="header-e2">
2 conforms
</div>
Then you can set this css which will cause 2 to "fill" the available space because of the overlow: hidden on it. So if 1 & 3 expand, 2 narrows (shrink window down to see what happens at really small size).
#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}
Technically, you could keep your current html order and your float: left on both 1 & 2 and make 3 the flex div with overflow: hidden. You could do the same with 1 by reversing the order of the html completely and setting 2 & 3 to float: right with 1 having overflow: hidden. To me it would seem best to have the middle flex, but you know your application better than I.
If you are trying to make the site with a responsive width, you can try the following (33% is roughly one-third):
#header-e1 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e2 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e3 {
float: left;
width:33%;
border: 1px solid black;
}
You could also used fixed widths for the divs. If you want the further from each other you can play with their left/right margins etc. Hope that helps!
Here is an edit for no widths:
#wrapper {
position:relative; (add to wrapper)
}
#header-e1 {
position:absolute;
left:0;
border:1px solid black;
}
#header-e2 {
position:absolute;
left:50%;
border:1px solid black;
}
#header-e3 {
position:absolute;
right:0;
border: 1px solid black;
}
You need to give the divs in your header a width, and float header-e3 left.
Note: They all have the same CSS properties, so just give them the same class like .headerDivs and then you don't have repeating code
Edit: here is a working jsfiddle: http://jsfiddle.net/eNDPG/
I'm using a similar idea to what RevCocnept suggested with the width: 33%, except using display: inline-block instead of float: left. This is to avoid removing the div elements inside #header from the flow of the page and causing the height of #header to become zero.
#header > div {
display: inline-block;
width: 31%;
margin: 5px 1%;
}
Demo
You can do something like this:
HTML
<div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
CSS
#left {
float: left;
border: 1px solid red;
}
#right {
float: right;
border: 1px solid blue;
}
#center {
margin-left: 50px;
margin-right: 50px;
border: 1px solid green;
text-align: center;
}
The centered <div> must come as the last one in the HTML code.
Here's a JS Bin to test: http://jsbin.com/evagat/2/edit
<style type="text/css">
body {
margin:0;
}
#header {
width:100%;
**strong text**margin:auto;
height:10%;
background-color:red;
}
#left {
width:20%;
float:left;
#margin:auto auto auto auto;
height:100%;
background-color:blue;
}
#right {
float:right;
width:20%;
#margin:auto auto auto auto;
height:100%;
background-color:green;
}
#middle {
position:relative;
left:0;
right:0;
margin:auto;
height:80%;
background-color:yellow;
width:100%;
}
#middle1 {
width: 80%;
margin:auto;
height:45%;
background-color:black;
}
#middle2 {
width: 80%;
margin:auto;
height:40%;
background-color:brown;
}
#middle3 {
width: 80%;
margin:auto;
height:15%;
background-color:orange;
}
#midmain {
width: auto;
margin:auto;
height:100%;
background-color:white;
}
#footer {
width:100%;
margin:auto;
height:10%;
background-color:red;
}
</style>
now check comment for html design.
css
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
position:absolute;
}
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
border:1px solid #E0DCD1;
clear:both;
}
Html
<div id="content2">
<div>content</div>
<div>content</div>
</div>
Result
div1 is showing inside div2
I need
div1 then
div2
Please help me.
why using position absolute,no need for clear property for last-child
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
/*position:absolute;*/
}
#content2 div:last-child
{
width:1024px;
height:200px;
/*position:absolute;*/
border:1px solid #E0DCD1;
/*clear:both;*/
}
div are cleared by default unless after using float property
remove position absolute from both child divs...
If you are using Position: absolute; specify the margin for both div's.
eg:
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
margin-top: xxx; /* specify the top margin */
border:1px solid #E0DCD1;
clear:both;
}
i think you are looking like this :- http://tinkerbin.com/3qRLgscO
Actually you made CSS bit of complicated for yourself.You can get your desired results through very simple CSS without using of positioning.
And if we are using float than we should use the clear for clearing the floated div's otherwise no need to use the clear property.
Here is the simple code of yours i have some simple changes in your CSS.....
HTML
<div id="content2">
<div>div1</div>
<div>div2</div>
</div>
CSS
#content2 {
background: none repeat scroll 0 0 red;
height: 200px;
width: 1024px;
}
#content2 div:first-child {
background: none repeat scroll 0 0 #E4ECF7;
height: 45px;
}
#content2 div:last-child {
background: none repeat scroll 0 0 yellow;
border: 1px solid #E0DCD1;
height: 45px;
}
I hope this will help you........
you can use the following properties in your div class.
float:left
clear:right;
I am using CSS to float a div next to another one. This div only appears if the user is looking at their own "business." When I don't clear anything, a large space appears between these divs and the next one. When I do clear the float, the text in the next div is pushed to the left. I think I am misunderstanding something about how to use the float and clear. I'm not very good with CSS.
How can I remove the space without destroying the "fs" div?
Here are pictures to show what is happening:
Here's the CSS and HTML code:
div.stuff {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
}
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
top:-97px;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
clear:right;
}
div.fs {
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}
<div class=stuff>
<img src=/economy/images/cash.png> Cash on Hand: 10,245<br>
<img src=/economy/images/worker.png> Workers Employed: 6<br>
<img src=/economy/images/machine.png> Machines Leased: 4
</div>
<div class=container>
Click Here to Manage Cash on Hand.<br>
Click Here to Manage this Business.<br>
Click Here to Disband this Business.
</div>
<br>
<div class=fs><a href=/economy.php?section=fs&id=7>Historical Financial Statements</a></div>
You need to float your left hand div, and use clear:both on the div at the bottom. I've made some changes in this jsFiddle.
perhaps this:
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
/*top:-97px;*/
margin-top:-97;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
/*clear:right;*/
}
I would float your div.stuff to the left and your div.container to the right and just use clear: both on the div.fs element. I made a small fiddle to illustrate this. In this fiddle I added a wrapper class for clarity where I set a min-width to prevent that the right div floats down one line when the browser window is resized. Try it out!
Here's the CSS:
div.stuff {
border: 1px dotted black;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
float: left;
}
div.container {
border: 1px dotted black;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
margin: 10px;
border-radius: 5px;
overflow: hidden;
float:right;
}
div.fs {
clear: both;
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}