Sorry for the slightly rubbish title. I could not think how to describe this one better.
I am trying to implement the Google Friend Connect members gadget on my site, (just got into the scheme and want to put it in without a major redesign, at least for testing sake).
My problem is as follows:
I have a container div that has a width of 90% of the main page (body). Inside this I am floating a div to the right and setting its width to 300px and putting the google gadget inside it. What I would like is to be able to have a div fill 95% of the space remaining to the left of the google gadget div.
I don't know if it is possible to be able to mix px and % with divs and widths.
I hope this makes sense.
Thanks
It is. You're looking for a semi-fluid layout. The quest was was originally the holy grail of CSS implementation... But as you can see from that link (they're doing 3 columns, 2 fixed but it's easy to alter), it's a problem long solved =)
If you prefer to avoid floats and clearfixes, use flex layout.
.main {
display: flex;
width: 90%;
}
.col1 {
flex-grow: 1;
}
.col2 {
width: 300px;
margin-left: 5%;
}
<div class="main">
<div class="col1" style="background: #518cf3;">Left column</div>
<div class="col2" style="background: #94d0bb;">Right column</div>
</div>
Note: Add flex vendor prefixes if required by your supported browsers.
I did a quick experiment as well after looking at a number of potential solutions all over the place. What I was trying to do was to have a mix of fluid and fixed rows and columns.
This is what I ended up with:
http://jsbin.com/hapelawake
Related
For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.
I was fiddling around with Twitter Bootstrap and noticed that my .row was wider than the screen length.
Here is the example
When bootstrap 3.0 came out I did not experience this.
The extra space on the right sides comes from margin-right: -15px;
I have been glaring at this for hours without making any progress on why or how I am fooling myself and searching has not been helpful.
I'm sure I am missing the obvious. I would like to understand why there is this space beyond the window width (forcing a scroller) and how to avoid it. I thought that a row would match 100%
The correct solution (https://getbootstrap.com/docs/3.3/css/#grid-example-fluid) is to use the container-fluid class on the surrounding div:
<div class="container-fluid">
<div class="row">
Content
</div>
</div>
I fixed it by just removing margin-left & margin-right from .row in bootstrap and also by setting it's width to 100%
EDIT >>
This was the previously accepted answer. Undeleted if anyone sites with a old version.
EDIT <<
It is a bug
Which seems to have been unfixed for while. Maybe a proper fix in 3.1.
Best suggestion seems to be "overflow-x: hidden on body element.
https://github.com/twbs/bootstrap/issues/10711
Other than that they added/clarified some of it in this commit
Especially this line "Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .row"
Your rows need to be placed inside a div with the container class applied.
For example
<div class="container">
<div class="row">
Content
</div>
</div>
I resolved this by selecting a specific row, only one was expanding the width of the page, and removing the margins.
footer .row {
margin-left: 0px !important;
margin-right: 0px !important;
}
I've attached a screenshot with this question. There are three columns and I want to keep the height of all the three columns exactly same. I managed to keep the width same with width css property now i wanted to adjust to height. Can anyone help me out in this regard. Thanks in advance.
I would use the following CSS to achieve this:
.wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
.column {
display: table-cell;
}
With table-layout: fixed you're telling every child elements with display: table-cell to have same width, equally distributed based on wrapper's width, as well equal height.
Demo
In pure CSS you can use CSS3 columns: for a 3-column layout just try with
<div style="columns:3">...</div>
(with both -moz- and -webkit- prefixes)
See https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts for the reference, in particular about the height balancing:
Height Balancing
The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.
There is actually no right, cross browser way to do this, but rather you have to resort to some hacks.
A method I have used previously is to wrap the three columns inside a container and set a custom background to the hole container. Basically you create an image, having the same width of the website, having the two vertical lines, and you set it as the background of the container.
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style> .wrapper { background-image: url(wrapper-bg.png); } </style>
You could use a javascript library like http://www.cssnewbie.com/equalheights-jquery-plugin/#.UVwCaZAW200 to achive this. This method however does not work if, the hight of the columns is dinamically changing in height (e.g. you have a collapsable item in it). Of course you can handle this cases by handling those events and recalculating the hight.
Finally you could use height: 100%. It's not as simple as it seems however! This solution does only work for block elements and the size of the parent has to be known. So, if you know the size of the website in advance you can do something like the following:
<div class="wrapper">
<div class="column">....</div>
<div class="column">....</div>
<div class="column">....</div>
</div>
<style>
.wrapper { height: 1000px; width:900px; }
.column { width:300px; float:left; height: 100%; }
</style>
Hopefully this will become simpler in future....
Alright, I understand that the purpose of a DIV is to contain its inner elements - I didn't want to upset anyone by saying otherwise. However, please consider the following scenario:
My web page (which only takes up a width of 70% of the entire page) is surrounded by a container (a div). However, under my navigation bar which is at the top of the page, I would like to create w banner that takes up 100% of the width of the entire page (which means it will have to extend outside the bounds of its container as the container is only taking up 70% of the page's width).
This is the basic idea that I am trying to accomplish: http://www.petersonassociates.biz/
Does anyone have any suggestions for how I could accomplish this? I'd appreciate any help.
Evan
If you just want the background of the element to extend across the whole page this can also be achieved with negative margins.
In a nutshell (correction from comment):
.bleed {
padding-left: 3000px;
margin-left: -3000px;
padding-right: 3000px;
margin-right: -3000px;
}
That gives you horizontal scroll bars which you remove with:
body {overflow-x: hidden; }
There is a guide at http://www.sitepoint.com/css-extend-full-width-bars/.
It might be more semantic to do this with psuedo elements: http://css-tricks.com/full-browser-width-bars/
EDIT (2019):
There is a new trick to get a full bleed using this CSS utility:
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
I guess all solutions are kind of outdated.
The easiest way to escape the bounds of an element is by adding:
margin-left: calc(~"-50vw + 50%");
margin-right: calc(~"-50vw + 50%");
discussion can be found here and here. There is also a nice solution for the upcoming grid-layouts.
If I understood correctly,
style="width: 100%; position:absolute;"
should achieve what you're going for.
There are a couple of ways you could do this.
Absolute Positioning
Like others have suggested, if you give the element that you want to stretch across the page CSS properties of 100% width and absolute position, it will span the entire width of the page.
However, it will also be situated at the top of the page, probably obscuring your other content, which won't make room for your now 100% content. Absolute positioning removes the element from the document flow, so it will act as though your newly positioned content doesn't exist. Unless you're prepared to calculate exactly where your new element should be and make room for it, this is probably not the best way.
Images: you can also use a collection of images to get at what you want, but good luck updating it or making changes to the height of any part of your page, etc. Again, not great for maintainability.
Nested DIVs
This is how I would suggest you do it. Before we worry about any of the 100% width stuff, I'll first show you how to set up the 70% centered look.
<div class="header">
<div class="center">
// Header content
</div>
</div>
<div class="mainContent">
<div class="center">
// Main content
</div>
</div>
<div class="footer">
<div class="center">
// Footer content
</div>
</div>
With CSS like this:
.center {
width: 70%;
margin: 0 auto;
}
Now you have what appears to be a container around your centered content, when in reality each row of content moving down the page is made up of a containing div, with a semantic and descriptive class (like header, mainContent, etc.), with a "center" class inside of it.
With that set up, making the header appear to "break out of the container div" is as easy as:
.header {
background-color: navy;
}
And the color reaches to the edges of the page. If for some reason you want the content itself to stretch across the page, you could do:
.header .center {
width: auto;
}
And that style would override the .center style, and make the header's content extend to the edges of the page.
Good luck!
The more semantically correct way of doing this is to put your header outside of your main container, avoiding the position:absolute.
Example:
<html>
<head>
<title>A title</title>
<style type="text/css">
.main-content {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<header><!-- Some header stuff --></header>
<section class="main-content"><!-- Content you already have that takes up 70% --></section>
<body>
</html>
The other method (keeping it in <section class="main-content">) is as you said, incorrect, as a div (or section) is supposed to contain elements, not have them extend out of bounds of their parent div/section. You'll also face problems in IE (I believe anything 7 or below, this might just be IE6 or less though) if your child div extends outside the parent div.
This question already has answers here:
How can I reorder my divs using only CSS?
(27 answers)
Closed 6 years ago.
Given that the HTML
<div>
<div id="content1"> content 1</div>
<div id="content2"> content 2</div>
<div id="content3"> content 3</div>
</div>
render as
content 1
content 2
content 3
My question:
Is there a way to render it as below by using CSS only without changing the HTML part.
content 1
content 3
content 2
This can be done in browsers that support the CSS3 flexbox concept, particularly the property flexbox-order.
See here
However, support for this is only in current versions of most browsers still.
Edit Time moves on and the flexbox support improves..
This works for me:
http://tanalin.com/en/articles/css-block-order/
Example from this page:
HTML
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
CSS
#example {display: table; width: 100%; }
#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group; } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */
As stated there, this should work in most browsers. Check link for more info.
It might not exactly match what you're after, but take a look at this question:
CSS positioning div above another div when not in that order in the HTML
Basically, you'd have to use Javascript for it to be reliable in any way.
This is one of the classic use-cases for absolute positioning--to change rendering from source order. You need to know the dimensions of the divs to be able to do this reliably however, and if you don't javascript is your only recourse.
I was messing around in Firefox 3 with Firebug, and came up with the following:
<div>
<div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
<div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
<div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
</div>
It's not perfect, since you need to know the heights of each container, and apply that height value to the negative top margin of the last element, and the bottom margin of the first element.
Hope it helps, nd
I got it to work by doing this:
#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }
but keep in mind that this will not work for you as soon as you have dynamic content. The reason I posted this example is that without knowing more specific things about your content I cannot give a better answer. However this approach ought to point you in the right direction as to using relative positioning.
One word answer: nope. Look into XSLT (XML Stylesheet Language Transforms), which is a language specifically geared towards manipulating XML.
If you know the height of each element then it is a simple case of vertical relative positioning to swap around the orders. If you don't know the heights then you either have to give them heights and allow the divs to get scroll bars if there is any overflow or calculate it all with JavaScript and add the relative positioning on-the-fly.
with jquery you can simply do:
$('#content2').insertAfter($('#content3'));
I don't think there's a way to do it with CSS, except to force fixed positioning of each of the divs and stack them that way.