Using the HTML below, I want the first div to have a static width of 265px. The second div should be next to the first one, but should be responsive (by shrinking the window this div should also shrink). How can I achieve this?
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
width: calc() will not work in all browsers.
Look at browser-support
<div style="width: 265px; float: left; background: #00f;">
test
</div>
<div style="width: calc(100%-265px); background: #000;">
test
</div>
Related
I want the page to be 100vh in height, so that there are no scrollbars on the whole page. For some reason the main grid is bigger than the screen size and some of the elements are getting clipped.
<html>
<body>
<div id="root">
<div class="app_container">
<div class="navigation">
<div class="navigation_logo_container"><img src="/icon.9c86b69e.png"
class="navigation_logo"><span>Sample</span></div>
<div class="navigation_buttons_container">
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
</div>
</div>
<div class="game">
<div class="quiz"><span class="question_text">Sample</span>
<div class="answer_choices">
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Codepen: https://codepen.io/GuacomoleCyclone/pen/RwKjmzO
Base on your setup the 100vh is working but your children are adding to the cause...
Meaning you have nav with height on fit-content...so lets just say 65px;
but then you have game div at height: 100%
If you remove that nav it works as you want, ..so for easily to solve this, you would have to also equate that extra height besides 100% game(nav height).
So meaning you would have to give:
.game {
height: calc(100% - 65px);
}
There are other ways to solve your setup without doing this but this is one of them.
Hi all I'm using this bit of code
<section id="post1">
<div class="container-fluid post-1">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-8 oblongbig">
</div>
<div class="col-lg-4">
<div class="row">
<div class="=col-lg-6 oblong">
</div>
</div>
<div class="row">
<div class="col-lg-6 oblong">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
to create three boxes, have a look at http://deliciousproductions.com.au
My problem is that the first and larger box is fine but the second two boxes should start after the first col-lg-8, but they just start right up against the large box, as though there's no padding/margin. I added a 10px margin so it's easier to understand. So the col-lg-8 isn't making it's width 8/12's of the screen?
The 2 boxes in rows also aren't responsive, they are but when you make the page smaller this happens: https://gyazo.com/4929147de70b0a88ac54d29f4ff2c243
and then finally: gyazo[.]com/c57374233a4e0f14fc4f757841893cc5
What would you recommend to make it so when the page resizes the 2 smaller boxes resize so they fit next to each horizontally under the larger box. This is for a blog style site btw.
cheers, Nik
here's the css for each box too
.oblongbig {
float: left;
width: 600px;
height: 300px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
.oblongbig:hover, .oblong:hover {
background-color: #121212;
}
.oblong {
float: left;
width: 300px;
height: 150px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
similar to this: demo
There is some problem with your grid code. Use this one
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<div style="height:330px;background:#000;"></div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;margin-bottom:30px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Also don't apply styles directly on grid column. Place content div inside grid column and apply whichever styles you want on that div.
Check out this URL for better understanding of Bootstrap grid system - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
To count a column you need to consider the value of the intervals between them.
Here you can see a visual explanation
There are a couple of issues going on in your code. For Bootstrap columns to work properly, you can't have a column div inside another column div without starting a row. For example, you must format it like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div><!-- .row -->
</div>
<div class="col-lg-4"></div>
</div><!-- .row -->
</div>
In your example you have two nested columns with no row in between. This will mess up your column padding & margins.
Refer to the docs: http://getbootstrap.com/css/#grid-nesting
Next, you're applying your own classes (.oblong, .oblongbig) with set float, fixed width, and margin to the Bootstrap column div. These are overriding the Bootstrap styles and preventing your columns from working properly.
The best idea is to use elements with Bootstrap classes to build your layout, then put elements inside these layout elements with your own custom classes. For example:
<div class="col-lg-6">
<div class="oblong">Your content here, separate from the Bootstrap element</div>
</div>
Avoid overriding the framework's styles, as this results in confusing code. Once you reformat your code so that columns are correctly nested and you're not overriding the Bootstrap classes with your own custom widths, it should come together how you want.
Since this question is outdated my question is how do I create a fluid row within non-fluid container.
I want to have a non-fluid container as my default layout, however the map I am placing, i need it to be full-width non-fluid.
here is my html:
<div class="container">
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
row-fluid is not working with bootstrap 3, setting width: 100%; only takes width of its parent (non-fluid container).
JS Fiddle, Please increase output window width so you can see the difference.
Thanks in advance
Try following code. You can make a 100% width container inside fixed layout.
http://jsfiddle.net/m1L6pfwm/2/
HTML
<div class="row row-full"> content... </>
CSS
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
I'm not sure that a completely understand your question, but can't you just use Bootstrap's container-fluid to contain the map row?
http://bootply.com/KP9j6dKCES
<div class="container-fluid">
<div class="row" style="height:100px; background: #f00;">
this should take 100% width
</div>
</div>
Either use apropriate layout
or get same effect using following
<div class="row-fluid" style="position:absolute;z-index:5">
<div id="map-canvas" class="container-fluid"></div>
</div>
<div class="container" style="z-index:0">
<--fluid with respect to first static/relative parent-->
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
You can play same effect using Z-index but not with it's grand parent
I'm using bootstrap in my RoR project. I have 2 columns, span3 and span9, which move while resizing the browser window: the span9 falls below and then returns to the side of the other span.
Here is the code, however the displayed result is different for some reason: http://jsfiddle.net/jUJn7/3/
HTML:
<div class="row">
<div class="span3 well" style="min-height:600px;">
</div>
<div class="span9 well" style="min-height:600px;">
</div>
</div>
I want the 2 spans to stay together in the same line. span3 must have a fixed width of 300px, span9 must adjust itself to the remaining space in the window.
I've tried the solutions in all other related questions with no success, and I've been trying to solve this problem for weeks, so I'll appreciate any help!
Fixed span3 and flexible span9
html:
<div class="row">
<div class="span3 well" style="min-height:600px;">
</div>
<div class="span9 well" style="min-height:600px;">
</div>
</div>
css:
.span3 {
float: left;
width: 300px;
}
.span9 {
margin-left: 350px;
}
I have multiple div's I want to display in a horizontal row. Normally, the way I'd do this is to simply float them to the right and put them in the markup in reverse order like so:
<div>
<div style="float:right">Right</div>
<div style="float:right">Middle</div>
<div style="float:right">Left</div>
</div>
I'm trying to accomplish a similar thing, float div's to the right, but I can't reverse their order in the markup for SEO reasons. The left div needs to be first in the code.
Is there a simple way to do this without resorting to positioning things absolutely?
You could apply a text-align: right to the container and a display: inline-block in place of the floating:
<div style="text-align: right">
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
DEMO
Using display:inline-block might not work as expected with elements of variable height.
So you might want to use:
<div style="float: right">
<div style="float:left">Left</div>
<div style="float:left">Middle</div>
<div style="float:left">Right</div>
</div>
See: demo of both -- inline and float-float.
You could give float: right to the outer div. And the display style of the inner div is inline-block
<div style="float: right" >
<div style="display:inline-block">Left</div>
<div style="display:inline-block">Middle</div>
<div style="display:inline-block">Right</div>
</div>
Float your elements to the left.
<div>
<div style="float: left; position: relative; width: 200px;">Left</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Middle</div> <!-- dummy width -->
<div style="float: left; position: relative; width: 200px;">Right</div> <!-- dummy width -->
</div>
Also, you'll need to specify the width for each of these divs.
What is your reasoning behind floating them to the right?