I'm adapting the hero template from bootstrap.
Nested in the hero-unit div I would like to have two divs to be rendered in wide screens, side by side, like:
|text 30% container width||picture the rest of container width|
and in narrow screens (smartphone) stacked:
|text full container width|
|picture full container width|
Any idea?
Use media queries to create different styles for different sized screens.
For the full size screen you could do:
<div id="left" class="cont">
</div>
<div id="right" class="cont">
</div>
CSS:
#left{
float: left;
width: 30%;
}
#right{
overflow: hidden;
}
The above layout will have the left div floating to the left, with a width of 30% and the right div will take up the remainder of the space.
For the mobile screen, your CSS will vary slightly.
<div id="left" class="cont">
</div>
<div id="right" class="cont">
</div>
CSS:
.cont{
width: 100%;
float: left;
clear: both;
/* Margins, padding, etc. */
}
Can't you just use the built in grid system?
<div class="hero-unit">
<div class="row-fluid">
<div class="span3">text</div>
<div class="span9"><img src="img.jpg"></div>
</div>
</div>
Related
I am trying to place 7 divs side by side but with a bit of uniqueness.
You can take a look at what I have done so far through the link HERE and view page source.
I want the Center div's width to fill the space between the Left Middle and Right Middle div irrespective of how far one drags the browser form to the left or right. At the moment the center div has white spaces left and right of it.
Can anyone help me out please?
You can achieve it with <table>. If you are pretending to use div-based structure, then you can simulate divs behaviour by using display:table etc...
here is HTML:
<div style="display:table;width:100%;">
<div style="display:table-row">
<div style="display:table-cell;width:100px;background:blue;">Left Fixed</div>
<div style="display:table-cell;width:auto;background:green;">Left Stretch</div>
<div style="display:table-cell;width:120px;background:yellow;">Left Middle</div>
<div style="display:table-cell;width:auto;background:#999;">Center</div>
<div style="display:table-cell;width:120px;background:yellow;">Right Middle</div>
<div style="display:table-cell;width:auto;background:green;">Right Stretch</div>
<div style="display:table-cell;width:100px;background:blue;">Right Fixed</div>
</div>
</div>
Here is a demo: demo link
Try with display: inline-block and white-space: nowrap.
Demo
Example:
HTML
<div class="parent">
<div class="child">first</div>
<div class="child2">first2</div>
<div class="child3">first3</div>
<div class="child4">first4</div>
<div class="child5">first5</div>
<div class="child6">first6</div>
<div class="child7">first7</div>
</div>
CSS
.parent{
margin:0 auto;
background:red;
font-size:0;
white-space:nowrap;
}
.child, .child1, .child2, .child3, .child4, .child5, .child6, .child7{
display:inline-block;
vertical-align:top;
width:100px;
padding:20px;
font-size:12px;
}
.child{
background:green;
}
.child2{
background:rgba(0,0,0,0.4);
}
.child3{
background:rgba(0,0,0,0.6);
}
.child4{
background:rgba(0,0,0,0.1);
}
.child5{
background:rgba(0,0,0,0.3);
}
.child6{
background:rgba(45,234,0,0.9);
}
.child7{
background:rgba(232,0,222,0.9);
}
LIve demo
Your left div has a width of 45%; your right div similarly. But the middle div has a width of 8%, so there's 2% left over.
If you make the centre div have a width of 10%, the gaps disappear.
<div style="position: relative;">
<div style="margin-left: auto; margin-right: auto; width: 10%; margin-top: 0px; background-color: #999">
Center</div>
</div>
since you had the two divs width's add up to 90% and the center div as 8%, fix this and the center this fills up the center
You can achieve this without any problem using HTML <table>. Or if you want to have it table-less, by using only div-based structure, then you can simulate table's behavior with display as table, table-row, table-cell in your CSS
Here is a Live Demo.
I have following kind of pattern. How to apply a css changes for first and second childDiv class to 50% to the parent div
How do I set 50%, 50% to the child div?
<div class="parentDiv">
<div class="childDiv"> // 50% width
</div>
<div class="childDiv"> // 50% width
</div>
</div>
.childDiv{
display:inline-block;
width:50%;
}
Example
Important notes:
don't leave whitespaces between the divs
You might as well use floats instead of display:inline-block;
If the elements don't align in the example, you browser does not support box-sizing, just omit the border then (it was for illustration purposes only).
There's a bit of a trick here, of which you need to be aware. If you put any whitespace between the closing of the first div and the opening of the second, your 50% won't work because of the space being displayed in the browser.
There are a couple ways to do this. If you are targetting only modern browsers (IE9+, FF, Chrome, Safari), you can use inline-block:
<style>
.childDiv {
display: inline-block;
width: 50%;
}
</style>
<div class="parentDiv">
<div class="childDiv"> // 50% width
</div><div class="childDiv"> // 50% width
</div>
</div>
However, IE7 doesn't support inline-block, so you can go to the "old-school" method, using floats:
<style>
.childDiv {
float: left;
width: 50%;
}
</style>
<div class="parentDiv">
<div class="childDiv"> // 50% width
</div><div class="childDiv"> // 50% width
</div>
<div style="clear: both"></div>
</div>
If you want to ensure both columns are exactly the same width and still have a small gap between them, use different styles of floats. Note this method doesn't require that you eliminate whitespace in your markup between divs, as long as the width you use is less than 50%:
<style>
.childDiv {
width: 49.5%;
}
.left { float: left; }
.right{ float: right; }
</style>
<div class="parentDiv">
<div class="childDiv left"> // 49.5% width
</div>
<div class="childDiv right"> // 49.5% width
</div>
<div style="clear: both"></div>
</div>
set parent width to something first.
.parentDiv
{
width: //insert width of the parentDIV
}
And then afterwards set the childDiv width.
I'm trying to position two panels and just can't get it to work...
I have a container-page wrapping two panels, each with it's own page. I want to position the panels side by side using float.
This is my CSS:
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: static;}
and HTML
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
</div>
I have to use position:relative for the left panel and position:static for the right panel. Strangely this works in JSBin but in my actual page, the right panel with position:static always has 100% width covering the whole screen.
Any hints on what I may be doing wrong?
Thanks!
div elements by default have a width of 100% of their parent. Since you floated the lefty div you took it out of the flow so what is happening is that the lefty div is effectively sitting outside the flow of the elements. Also float causes the div to shrink-wrap to the size of it's children. So if you are wanting to set the righty div to but up against the lefty div then you should do two things: first add float:left; position:relative; to the righty styling. Second you should add a div at the bottom of that to clear your floats.
On another note you should only use a class if you are going to be styling multiple elements the same way, otherwise just style the element off of the ID.
.pages {width: 100%; position: absolute;}
.leftPanel {position: relative; width: 25%; min-width:100px; float: left;}
.rightPanel {position: relative; float: left;}
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page">
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div style="clear:left;"></div>
</div>
Try floating both of the panels? As of right now only the left one is floated... try floating both of them to the left and then putting the correct amount of margin between them to line them up like you want them. Or even floating one left and the other right would probably work.
Add this to your CSS,
div.clear-both {clear: both;}
And change your HTML to this:
<div class="page">
<div id="lefty" class="leftPanel">
<div class="page"
<p>helloworld</p>
</div>
</div>
<div id="righty" class="rightPanel">
<div class="page">
<p>HELLO WORLD</p>
</div>
</div>
<div class="clear-both"></div>
</div>
I'm having an issue aligning three divs inside a parent div, the effect I need is the following
|IMAGE| +TEXT+ |IMAGE|
Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.
Something like this for example, if the user maximizes the window:
|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|
As you can see, the idea is that the center div grows, and auto width but keeping the structure.
How could I get that behaviour? Thanks in advance.
#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }
If that still doesn't behave how you want, please give more detailed requirements.
Here is another inline implementation for three images side by side:
<div style="text-align:center">
<div style="float: left"><img src="image1.png"/></div>
<div style="display: inline"><img src="image2.png"/></div>
<div style="float: right"><img src="image3.png"/></div>
</div>
This works rather well as well.
.container{width: 100%; padding: 5px;}
.fig-left {float: left;}
.text {float: left;}
.fig-right{float: right;}
/* add margins maybe */
.text, .fig-right, p{margin: .75em;}
and HTML https://codepen.io/tradesouthwest/pen/MWELwGN to test
<div class="container">
<div class="fig-left">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
<div class="text">
<p>ABCDEFGHIJKLMNOP don't forget the alt in images QRSTUVWXYZ</p>
</div>
<div class="fig-right">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
</div>
I have a two column layout, using a container and a div called "left" and a div called "Right". How do I make sure that the div#right is only 500px, but div#left is as big as the user's browser will allow ...?
Here's what I have now:
<div id="container">
<div id="left" style="float:left"> </div>
<div id="right" style="float: right; width: 500px"> </div>
</div>
Don't float the left div to the left. If you leave it "unfloated", then it will be the main content and automatically fill the available space.
You can do it by unfloating the #left div and giving it a padding-left that equals the #right div's width (this makes room for the right div). Finally, you'd need to swap the source order of both div's.
<div id="container">
<div id="right" style="float: right; width: 100px; "> </div>
<div id="left" style="padding-right: 100px; "> </div>
</div>
You can see it in action here.
Change style of you left div to:
<div id="left" style="margin-right:500px"></div>
This will make sure that content won't flow under the right floating div when content in the left one takes more vertical space than content in the right one.
Important
Don't forget to put the floated div in front of the unfloated one. So put your right one first in the markup and then the left one.
Solution to your particular problem
So you have two div elements
<div id="endants-content">
<div id="screenshot-preview">...</div>
<div id="endants-main-content">...</div>
</div>
And CSS should be like this to make it work as expected:
div#endants-content
{
/* put min-width here is you need it */
}
div#screenshot-preview
{
float:right;
width:30%;
}
div#endants-main-content
{
margin-right:30%;
overflow:auto;
}