This question already has answers here:
Three-column variable width CSS page layout, centre column expands
(2 answers)
Closed 8 years ago.
I'm stuck with a problem. How to make full screen layout, where left and right columns are fixed width (for example 250px), but middle column is fluid. My page must be always be full screen!
I want something like this:
You can achieve this using a bit simple logic of CSS.
You have to create 3 different styles which can take care of Left content, middle content and right content. Here you go :
#fixed_width {
width:96px;
padding:2px;
border:1px solid #000;
float:left;
background-color:#f00;
}
#fixed_width_right {
width:96px;
padding:2px;
border:1px solid #000;
float:right;
background-color:#f00;
}
#unfixed_width {
padding:2px;
margin-left:105px;
border:1px solid #000;
background-color:#090;
}
Use this CSS styles in your HTML code like below :
<div id="container">
<div id="fixed_width">col 1, 80 pixels </div>
<div id="fixed_width_right">col 3, 80 pixels </div>``
<div id="unfixed_width">col 2, wild card </div>
</div>
And you are done :)
Cheers..!!
Related
This question already has answers here:
html/css responsive 3-column layout - stack right column below left column
(2 answers)
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Closed 5 years ago.
I have a grid system that uses flexbox. At present I'm trying to work out if I can make it work with the following scenario.
<div class="flex-outer">
<div class="flex-inner span-all red-box">
<h2>Title</h2>
</div>
<div class="flex-inner span-1of2 green-box">
<div>Some text</div>
</div>
<div class="flex-inner span-1of2 blue-box">
<p>A table perhaps</p>
</div>
</div>
.flex-outer {
display:flex;
flex-wrap:wrap;
}
.span-all {
width:100%;
}
.span-1of2 {
width:50%;
}
.red-box {
background-color:Red;
}
.green-box {
background-color:Green;
}
.blue-box {
background-color:blue;
}
The html above could be used to create the following layout:
However on a certain breakpoint, I'd be looking to change the layout to something like this:
I can change the order of the green and blue boxes to suit, but on wrapping, the second box is position below the blue box. This is the behaviour I expected.
So, are there any flexbox tricks I can use to tuck the green box immediate beneath the red one?
This question already has an answer here:
Ribbon with a "3D" effect
(1 answer)
Closed 8 years ago.
what would the best way to create a div that overlaps its parent container. im using bootstrap and want to create a banner that goes larger than its container, i want to create the following:
This is the code i have so far:
<div class="container container-white no-pd">
<div class="service-banner">
<div class="text-center">
Headline title here Our Services
</div>
</div><!--/service banner-->
</div><!--/container-->
This gives me the following:
any advice?
You could use pseudo elements for this sort of functionality:
.gray{
height:300px;
width:100px;
background:darkgray;
position:relative;
}
.banner{
position:absolute;
width:350px;
height:100px;
background:blue;
top:20px;
left:80px;
}
.banner:after{
position:absolute;
content:"";
height:0px;
width:0px;
border-left:20px solid transparent;
border-top:20px solid gray;
bottom:-20px;
left:0;
}
<div class="gray">
<div class="banner">Heading here</div>
</div>
Please Note the following for further understanding:
I've been able to use the top, bottom, left and right properties in my css since I have set that element to position:absolute;. When an element is positioned like this, It means they can be manipulated using these.
It's also important to note how i made the 'triangle shadow'. This was achieved through using the 'border hack', in which allows you to set a transparent border, and a 'coloured one' in order to make this: see here for more info about this.
pseudo elements need to contain a content and usually are positioned absolutely in order for you to position them nicely in your markup.
What I want to do is have a responsive, 3 column design. If the site is being viewed on a phone, the columns should collapse one on top of the other. What I have below will do that however, the problem I cannot seem to solve is with the vertical borders.
If the site is being viewed on a normal desktop computer, there should be 3 columns with two vertical borders at 100% height. What is happening now is that when I shrink the browser, the boxes collapse as they should but the borders will not go to the floor.
If the screen is wide enough to handle only two columns, one of the boxes should collapse under and there should only be one vertical border. If the screen is only wide enough for one column, then the other two boxes should collapse under the first box and there should be no border at all at that point.
What I am trying to accomplish is to show the data with borders (if width allows) so that it doesn't look like its all running together.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height:100%;
}
#wrapper {
width:100%;
height:100%;
float:left;
}
#wrapper div {
width:33%;
height:100%;
min-width:300px;
display:inline-block;
}
#wrapper div:nth-child(1) {
border-right:1px solid #000;
}
#wrapper div:nth-child(2) {
border-right:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
You can use css media queries to handle the common scenarios, like
// initially all divs will have right boarder by default
#media(width:768px){ // assume that at 768px you'll have 2 divs inline
#wrapper div:nth-child(2) {
border-right:0px;
}
#wrapper div:nth-child(3) {
border-right:0px;
}
}
#media(width:512px){ // assume that at 512px you'll have all 3 divs vertical
#wrapper div {
border-right:0px;
border-bottom: 1px solid #000;
}
}
etc
The answer will depend of the compatibility you want to have with old browser (I'm looking at you, IE <= 8). The best new technology to deal with that is Flex boxes, so if you only need to deal with most up-to-date browsers, you have your answer. If you need compatibility, please tell me.
This question already has answers here:
How to create equal height columns in pure CSS [duplicate]
(2 answers)
Closed 8 years ago.
I want to use a simple layout, sidebar, subsidebar and the main content, all columns need to be the same in height. Here's when I get stuk, the columns need to be min- screen height if they are empty, and if 1 column has an element/content the other columns need to be the same height.
// het idea
<div id="container">
needs to be min-heigth 100%
<div id="sidebar">
needs to be 40px width
</div>
<div id="subsidebar">
needs to be 200px width
</div>
<div id="content">
needs to be 100% width
<div class="some-element-is-3000">
3000px height(example)
</div>
</div>
</div>
Try the below fiddle.It uses display:table; and display:table-cell;:
CSS
html,body,#container{
width:100%;
height:100%;
}
#container{
display:table;
}
#sidebar,#subsidebar,#content{
border:1px solid black;
display:table-cell;
}
#sidebar{
min-width:40px;
}
#subsidebar{
min-width:200px;
}
#content{
width:100%;
}
Fiddle with all three divs with less contents Fiddle
Fiddle with content div exceeding window height Fiddle
This question already has answers here:
How to use vertical align in bootstrap
(8 answers)
Closed 8 years ago.
I have a very simple problem on vertical middle a span using Bootstrap 2.3.2.
Requirements:
There are two columns, left column has a fixed height 300px because there is 300x300 image inside.
Right column has text and must be centered based on left column.
The whole thing must be responsive. That's why I am using responsive image.
If the second column goes down to bottom, its height must fit the size of text. That means I cannot set fixed height on the second column.
Must not use JS to solve this.
HTML:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<img class="img-responsive" src="http://placehold.it/300x300"/>
</div>
<div class="span6 v-center">
<div class="content">
<h1>Title</h1>
<p>Paragraph</p>
</div>
</div>
</div>
</div>
CSS:
.v-center {
display:table;
border:2px solid gray;
height:300px;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
}
My code: http://jsfiddle.net/qhoc/F9ewn/1/
You can see what I did above: I basically set the second column span as table and middle the .content table-cell. I copied that method here How to use vertical align in bootstrap (with working example here http://jsfiddle.net/lharby/AJAhR/)
My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.
Add !important rule to display: table of your .v-center class.
.v-center {
display:table !important;
border:2px solid gray;
height:300px;
}
Your display property is being overridden by bootstrap to display: block.
Example
.row {
letter-spacing: -.31em;
word-spacing: -.43em;
}
.col-md-4 {
float: none;
display: inline-block;
vertical-align: middle;
}
Note: .col-md-4 could be any grid column, its just an example here.