I´m trying to float 3 divs in different order in responsive design. In mobile version is correlative (div 1, div 2, div 3) but in desktop version I want to place the div 3 near the div 1 and the div 2 at bottom of them. I´m triying it with float, clears and so but I dont know how fix it. I share a mockup. can help me anyone? Thanks
(source: subirimagenes.com)
This is the html structure:
<div id="fondo-web">
<div id="main">
<section id="main-container" name="div1">
Random Image
</section>
<section id="cadiz-a-caballo" name="div2">
Copy Text
</section>
<section id="frm-container" name="div3">
Contact Form
</section>
</div>
</div>
In example, this is one attempt:
#main-container{
width:33%;
background-color:#856;
float:left;
}
#cadiz-a-caballo{
width:33%;
background-color:#376;
}
#frm-container{
width:30%;
background-color:#856;
float: right;
}
And other attempt with absolute positioning and margin-bottom for the father container:
#main-container{
width:62%;
background-color:#856;
float:left;
}
#cadiz-a-caballo{
width:70%;
position: absolute;
background-color:#376;
top:600px;
}
#frm-container{
width:35%;
background-color:#856;
float: right;
}
#main{
width:75%;
margin:auto;
margin-bottom: 150px;
overflow: hidden;
background-color: #343;
}
This is more or less what you want: http://jsfiddle.net/uyQzQ/1/
First of all you want to make the first div to a certain percentage of its parent:
#main-container{
width:65%;
}
This will leave space for the 3rd div to fall into later.
Then you want the second div to be the full width of the parent:
#cadiz-a-caballo{
width: 100%;
}
Finally you want to position the 3rd div in the space left to the right of the first div. To do this you need to position the parent so absolute positioning of the 3rd div will be relative to the parent, not the document:
#main{
position: relative;
}
Now, you just need to set the width of the 3rd div to the size of the space that is left, and then position it in the top right of the parent.
#frm-container{
width:35%;
position: absolute;
top: 0;
right: 0;
}
I've not included any margin between each element. You can adjust the widths to take this into account to add those margins.
The main issue with this approach is that the 3rd div needs to be the same height or shorter than div 1, otherwise as div 3 is out of the flow of the document, it will display on top of div2 as well (and any content below that too if long enough).
Related
I have 2 divs, one 30%, one 70%, with float:left to position them side by side in the webpage. the first div contains some text, a select control and a button. that displays properly. The second 70% width div is a slideshow container. I use javascript to display the slides, which are contained within varying sized divs. The slides have a 50px margin-left and display properly. I have another div within the slideshow container div that contains navigation elements for navigating through the slideshow. I want to position this div below the current slide, offset by 50px left and centre within the slide width.
here's a diagram...
Something like this?
https://jsfiddle.net/tmqqn9aj/
Kind of hard to tell what you want without seeing your code.
Add a slide container around your slide and then use:
position: absolute;
left: 50px;
To add the 50px left 'margin'
And add position: relative to the 70% width div
Add your nav inside the slide container, leave the width at auto and center align your nav
Ok, just seen your code.. the problem is you are absolutely positioning .mySlides and so the nav is being pushed to the top of the document as absolute positioning removes any relativity.
Instead, absolutely position your .slideshow-container and add left: 50px to it, remove margin-left: 50px and position: absolute; from .mySlides
#container{
margin:0 auto;
width:100%;
}
#leftpart{
width:30%;
height:200px;/*remove this*/
background-color:blue;/*remove this*/
float:left;
}
#contentpart{
width:70%;
height:500px;/*remove this*/
background-color:red;/*remove this*/
float:left;
}
#fixeddiv{
width:30px;
height:100px;/*remove this*/
position:absolute;
top:10px;
left:calc(30% + 5px);
background-color:cyan;/*remove this*/
padding:0px;
}
.sidediv{
margin-top:5px;
width:100%;
height:30px;/*remove this*/
background-color:violet;/*remove this*/
}
<div id='container'>
<div id='leftpart'></div>
<div id='contentpart'>
<div id='fixeddiv'>
<div class='sidediv'></div>
<div class='sidediv'></div>
</div>
</div>
</div>
this is my html (for example)
<div id="wrap">
Some relative item placed item
<div id="fixed">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
</div>
here is my css:
#wrap{
float: left;
position: relative;
width: 80%;
background:#ccc;
}
#fixed{
width:inherit;
}
I want to make the second div that is 'fixed' to have same width as the first 'wrap'. I tried a lot, but i can't do it.
Is it possible to do this without any javascript?
Any suggestion..please.
here is the fiddle for this:
http://jsfiddle.net/sris/tktdf1kk/
You need to leave your width alone. Divs already expand 100% of their containing div. The reason your text is not wrapping is because it's all one word. Add the CSS:
#fixed {
word-wrap: break-word;
}
I am trying to create a page footer with some text on the left, on the right, and centered on the page. I've been following examples such as this and I'm having the same problem with all of them: The content in the center div is centered between the borders of the left and right divs, not centered on the body. That is, if left/right are not the same width then the center is off-center.
I can't use fixed widths because I know neither the content nor the font size. I do know the content will be just a few words each.
I can't use explicit proportional widths either for similar reasons; I don't know the proportions of the content and e.g. the center may be short with a left or right side greater than 1/3 of the page width.
I don't actually have to use divs, I just am because that seems to be the way this is done... but anything that will get me a left + body centered + right aligned footer-style layout will work (as long as it works on all common browsers).
I don't care what happens when contents overlap; they can either overlap, or word-wrap, or do something else ugly.
Currently the closest I've gotten is this CSS:
#left { float:left; }
#right { float:right; }
#center { float:none; text-align:center; }
And this HTML:
<div id="container">
<div id="left">...</div>
<div id="right">...</div>
<div id="center">...</div>
</div>
But I am seeing this (an extreme example):
Here is a fiddle: http://jsfiddle.net/HCduT/
I've tried various combinations of float, display, overflow, and margin, but I can't seem to get this right.
Edit: I've also tried http://jsfiddle.net/nshMj/, recommended by somebody elsewhere, but it's got the same issue (with the disadvantage that I don't really understand what it does).
How do I make the content in the center div aligned to the page, rather than centered between the left and right divs (which have different sizes)?
I'm not 100% sure what you're after. Here's what I did get:
You want the left div on the left
You want the right div on the right
You want don't want to limit the width of those to 33%;
You want the center to always be dead center.
You don't care about overlapping content
If I got that right, then try this out: DEMO
CSS:(The color is just so you can distinguish the content, as it overlaps)
#content {
text-align:center;
}
#container {
position: relative;
}
#left {
float:left;
}
#right {
float:right;
color: #ccc;
}
#center {
text-align:center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: red;
}
After some research i ended with this:
html
<body>
<div id="content">center point V center point</div>
<div id="container">
<div id="left">L</div>
<div id="center">C</div>
<div id="right">RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR</div>
<br style="clear: left;" />
</div>
</body>
css
#content {
text-align:center;
}
#left {
width:33%;
float:left;
}
#right {
width:33%;
float:left;
overflow:hidden !important;
}
#center {
float:left;
width:33%;
text-align:center;
}
#container{
width:100%;
}
fiddle
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: center doesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.
Is there something simple I'm overlooking? Or how would I do such a thing?
Update:
In addition, I'd like to find a way of centering that middle div in the space between the divs in case that looks better.
If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:
left-floated | right-floated | centered
Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:
margin:0 right-floated-width 0 left-floated-width
That should work.
Years later edit
Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.
You can see a very good flexbox guide here. The example you need is right here.
Indeed, the important part is that the centered div come after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto on the centered div, which causes it to be centered.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
Here's a JS Bin to test: http://jsbin.com/agewes/1/edit
Usually you can use flexbox instead of floats:
https://jsfiddle.net/h0zaf4Lp/
HTML:
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS:
.container {
display: flex;
}
.center {
flex-grow: 1;
}
The element with the centered content needs to be specified after both floated elements. After that, simply set the middle element to text-align: center. The text in the centered element will squeeze in between the floats.
See here:
http://jsfiddle.net/calvintennant/wjjeR/
Try this (make sure to use better class names):
.left {
float:left;
width:200px;
}
.right{
float:right;
width:200px;
}
.center {
overflow:hidden;
zoom:1;
}
The center div will fit between the two floats.
If you want to create a gutter between that centered div and the two floats, then use margin on the floats, not on the center div.
Because of "zoom", the CSS will not validate, but that layout will work in IE 5.5 and 6.
Note that source order is important here: the two floats must come first, then your "centered" div.
In some cases, you have a limitation and cannot change the page markup by moving the middle div after the right-floated div. In that case, follow these instructions:
For container: position: relative
For middle div: position: absolute; left: [containerWidth - middle-width / 2]
I hope you got the idea.
A simple solution without having to change the order of the divs (sometimes we can not do this) could be an absolute positioning for the center div as follows:
.container {
position: relative;
}
.container div {
width: 200px;
background: red;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
https://jsfiddle.net/Helioz/nj548y0g/