I've spent way too long trying to work out how to do this!
I have two floated divs in a margin 0 auto container, top-left and top-right.
I have two absolute positioned divs that stick to either side of the window and meet each other at some point, bottom-left and bottom-right.
So my problem is, I want the meeting point of top-left and top-right divs to always be inline with the meeting point of bottom-left and bottom-right.
HTML:
<div id="container">
<div id="top-left">Top Left</div>
<div id="top-right">Top Right</div>
</div>
<div id="bottom-left">Bottom Left</div>
<div id="bottom-right">Bottom Right</div>
CSS:
#bottom-left {
position: absolute;
left: 0;
height: 70px;
right: 45%;
}
#bottom-right {
position: absolute;
right: 0;
height: 60px;
left: 55%;
}
#container {
margin: 0 auto;
width: 200px;
overflow: hidden;
}
#top-left {
width: 125px;
float: left;
}
#top-right {
width: 75px;
float: left;
}
JS Fiddle of example http://jsfiddle.net/JECyC/1/ If you change size of the window, the meeting points drift apart!
I may be approaching this in the wrong way, so I'm open to a completely different solution!
Cheers.
Edit 1:
Screenshot, I need to make sure that the divs corners always meet.
#top-left {
background-color:yellow;
width:68%;
float:left;
}
#top-right {
background-color:blue;
width:32%;
float:left;
}
Something like this ... I just don't see another way.
Your top-left and top-right have fixed width but bottom-left and bottom-right have variable width . so they will never be inline as if u keep reducing window size, top divs will be as it is and size of bottom divs will keep reducing so there will be point when both bottom divs have width equal to single top div n other div is not visible due to scrollbar.
You can try applying fixed width and margin auto to bottom div as u did with top div . if u want them always be inline.
Thank you
use this code i hope this will help for u
<html>
<head>
</head>
<body>
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style=" width:450; height:70px; background:yellow; float:left;">top left</div>
<div style=" width:450; height:70px; background:green; float:right;">top right</div>
</div>
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style=" width:450; height:70px; background:red; float:left;">botom left</div>
<div style=" width:450; height:70px; background:blue; float:right;">bottom right</div>
</div>
</body>
</html>
Related
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
I want to make 3 divs(left, middle, right) in one line, the left and right divs with fixed width, while the middle one with expanding width(with percent use).
So far I tried couple of variants, but nothing do the job.
I want it something like that:
[...150px...][...100%...][...150px...]
While at the middle I'll be able to put a text that will brake line normally(without inline).
Sorry for my bad english.
I need it as much as possible adaptable for cross-browsering.
You can do like this:
.div1{
width: 150px;
float: left;
}
.div2{
width: 150px;
float: right;
}
.middiv{
width: calc(100% - 300px);
margin: 0 auto;
}
But I would recommend you to use width for middiv by calculating yourself. For eg:
If the parent div width is 1000px then your middiv would be 1000 - 300 = 700px
This should work:
HTML:
<div class="table">
<div class="row">
<div class="fixedCell"></div>
<div class="cell"></div>
<div class="fixedCell"></div>
</div>
</div>
CSS:
.table{
width:100%;
height:20px;
display:table;
}
.row{
display:table-row;
}
.fixedCell {
width:150px;
display:table-cell;
background-color:red;
}
.cell{
display: table-cell;
background-color:green;
}
http://jsfiddle.net/yxt3gu11/
I would position the left and right parts absolutely and give the center a horizontal margin of 150px.
<div class="row">
<div class="left">left</div>
<div class="center">centered text</div>
<div class="right">right</div>
</div>
.row {
position: relative;
}
.left,
.right {
width: 150px;
background-color: #f99;
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
margin: 0 150px;
}
Or see http://codepen.io/ckuijjer/pen/Fygow . If the left and right parts might have more content, add a clearfix to the row.
Please look at this JsFiddle.
JSFiddle
<div class="main" >
<div class="menufixedleft">
Fixed Menu Should not Scroll
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
I am trying to have a menu div on the left fixed, content on center and sidebar on right.
It's not working when i have the center and right side bar, float left. The center div overlays the fixed div on the left.
Is my only option is to float the 2 divs(center and right sidebar) to the right ?
Thanks !
Make room for the fixed element by giving main either padding-left:100px; or margin-left:100px depending on how you want it to look (The 100px comes from how wide the fixed element is)
Updated jsFiddle
Check out this JSFiddle: http://jsfiddle.net/J2tt6/1/
Here's the CSS code:
body {
padding: 0;
margin: 0;
}
.main{
height:500px;
width:550px;
background:pink;
position:relative;
}
.menufixedleft{
height:200px;
width:100px;
position:fixed;
left:0;
top:20px;
background:green;
}
.content{
height:400px;
width:200px;
background:blue;
position: absolute; /* should not float, as fixed elements are above everything else. */
left: 100px;
}
.rightsidebar{
height:200px;
width:100px;
background:red;
position: absolute; /* once again, don't float. */
left: 300px;
}
When you set position: fixed to your left navigation, it is taken out of the layout. To keep it in, you will need to contain your menu in another element, which remains in the layout.
HTML:
<div class="main">
<div class="menu">
<div class="affix">
Fixed Menu Should not Scroll
</div>
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
CSS:
.menu {
float: left;
min-height: 1px;
width: 100px;
}
.affix {
height: 200px;
width: 100px;
position: fixed;
left: 0;
top: 20px;
background: green;
}
JS Fiddle
I have two divs under menu of site: content and right-content.Right content is sidebar which is fixed to the right side of screen,and he has a wiht 200px.Content is div for content of site and I want him to start on the left side of the screen and to stop when it reaches the right-content.Some suggestions?
HTML code of DIVs:
<div id="content">
</div>
<div id="rightcontent">
bla vlaaa
</div>
CSS code:
#content {
float:left;
position:absolute;
background-color:#ffffff;
height:500px;
}
#rightcontent {
margin-top:5px;
border:1px solid;
border-color:#ffffff;
border-radius:5px;
float:right;
position:relative;
background-color:#D4D3D0;
width:300px;
height:500px;
}
You can use a wrapping div for the content, and padding or margins to do this. For example, the style sheet could look something like this:
.div-content-wrapper {
width: 100%;
}
.div-content {
margin-right: 200px;
}
.div-rightsidebar {
width: 200px;
position: fixed;
right: 0;
top: 0;
}
And the html would look like this:
<div class="div-content-wrapper">
<div class="div-content">
<h1> This content will not go further than 200px from the right side</h1>
</div>
<div class="div-rightsidebar">
<h4>Right bar content</h4>
</div>
</div>
The right sidebar can go inside or outside of the wrapper, it doesn't really matter.
I want to have a container with a set width and height.
Within that container I have:
a vertically and horizontally centered text
a few vertically centered icons on the left side of the container
a few vertically centered icons on the right side of the container
My test code:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
display:inline-block;
font-size:18px;
text-align:center;
}
.iconsleft, .iconsright {
display:inline-block;
}
.iconsright {
right:0;
}
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">centered text</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
</div>
(I took a random icon from google for this test)
This is what my test code looks like and what it should look like:
http://imgur.com/0QfcQnF
CodePen
I try to avoid floats:
http://jsfiddle.net/techsin/Gz4nv/1/
Things I did:
Inserted Blank content which has its type set to inline-block (by default content added by css content:'etc' is inline element), and make it 100 percent the height of container, thus stretching the line height to height of container. So when i would vertical-align something it would see whole height of container as something to get aligned with.
Declare container position as relative. Which would help in positioning icons absolutely. Because absolute positioning refers to first parent element that has been explicitly positioned relatively. position:relative.
Than simply put left:0; on left container and right:0; on right one.
make them both move down 50% the height of container.
Then make them move them up 1/4th the height of container to bring them in center vertically by giving them negative margin.
Demo
If you want the icons to go to one side, you should tell them to float in that direction.
The text isn't centered because it only takes up as much space as it needs. Explicitly setting a width, will tell it to take up more space, and thus allow the text to be centered. This could be in pixels or percentages. For example if you have a container with width A and four images with width B (each), you could set the width to A - 4B pixels.
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright {
display:block;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}
Just float the two side <div>s to left and right, and put the right <div> before the centered <div> in the HTML structure.
Demo here
<style>
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
vertical-align:middle;
margin:auto;
}
.text {
font-size:18px;
text-align:center;
}
.iconsleft {float: left;}
.iconsright {float: right;}
</style>
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png">
</div>
<div class="text">Centered demo text</div>
</div>
By changing the container height and giving it some bottom padding, you can make the full box vertically centered.
Bonus demo
Change height: 70px; in .container to this:
height: 50px;
padding-top: 20px;
text-align: center needs to be set on the parent block, not the centered block, if you have display: inline-block.
Also vertical-align:middle; won't do you any good, unless you're in a table cell (or a div styled like one). If you want "real" vertical centering on IE7+ use good ol' tables, in conjnction with vertical-align: middle. Or just fake it with margins.
For .iconsleft and .iconsright use you might want to try floats, or position: absolute;
CSS:
.container {
width: 700px;
height: 70px;
border: 1px solid;
background-color: #ddd;
margin:auto;
text-align:center;
}
.text {
font-size:18px;
margin-top: 22px;
}
.iconsleft, .iconsright {
margin: 20px 10px 0;
}
.iconsleft {
float: left;
}
.iconsright {
float: right;
}
HTML (floats need to be written before the content):
<div class="container">
<div class="iconsleft">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="iconsright">
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
<img src="https://www.tsf-showwelt.de/ticketportal/images.ticket/zoom_in.png" />
</div>
<div class="text">centered text</div>
</div>
Demo with vertical and horizontal align.
I used a simple grid system to align everything up - CSS:
.grid {
width:200px;
height:70px;
float:left;
}
HTML:
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
<div class="grid text">centered text</div>
<div class="grid">
<img src="http://placehold.it/16x16">
<img src="http://placehold.it/16x16">
</div>
I know this may not be the the perfect way but I think this hack might help:
.text {
display:inline-block;
font-size:18px;
text-align:center;
width: 80%;
}
.iconsleft, .iconsright, .text {
display:inline-block;
margin-top:20px;
}
.iconsright {
float: right;
}
.iconsleft {
float: left;
}