On my webpage, I have a div element on the left with a static width of 300px. Right next to it, on the right, I want to display another element which has a dynamic, flexible width (because the browser window could be resized by the user) by using the Bootstrap grid with col-12. Imagine this:
<div class="row">
<div style="width:300px;"></div>
<div class="col-12"></div>
</div>
The div with class="col-12" should be right next to the left div, without space in between of them, and it should be growing/flexing always to the right of the window.
Unfortunately, it seems not to work, having a static px-width on the left element, and on the right an flex element with col-12. The second div is always BELOW the first div. Do you know a solution? Thanks in advance!
Try giving the second div in the row the class "col".
<div class="row">
<div style="width:300px;"></div>
<div class="col"></div>
</div>
Regards!
Related
I'm trying to prevent the left div from scrolling. I've set its position to fixed but now, it is overlapping with the right one. What can I do? I've tried position: relative and absolute to the right div but nothing happens.
<div class="container-fluid">
<div class="row">
<div class="col-sm-7">
</div>
<div class="col-sm-5">
<div id="googleMap"></div>
</div>
</div>
</div>
Add the class col-sm-offset-7 to the col-sm-5 element.
When you make an element's position absolute or fixed, it is removed from the flow of relative and static elements, thus vacating its space in that flow, allowing subsequent elements to "move up" (or left in your situation) in its place.
Assuming you're using Bootstrap, your col divs are floated left so when you make the col-sm-7 fixed, it gets pulled out of the flow making the col-sm-5 float all the way to the left where the other element used to be before being removed from the flow.
I am trying to design a responsive webpage using bootstrap. I have the following HTML structure
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="well"><!--Page content here--></div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="well">
<form class="form-horizontal" role="form">
<!--Form elements here-->
</form>
</div>
</div>
</div>
</div>
Now, I want the div.well inside div.col-lg-4 to be fixed positioned. So when I add style="position:fixed;" to the div.well, the default responsive width which it inherits from its parent (that is 33.33%) gets reduced and the form elements gets shrunk. Any suggestions on how I can fix this?
Take a look at this Codepen.
In the CSS Box Model, fixed positioning takes an element out of the normal flow, and if there are no other sibling elements, the parent container will collapse. In this case, the form inherits it's width from the parent, but when taken out of normal flow with fixed positioning, the width value of the parent does not cascade. But when I add a sibling element to illustrate my point, in this case a Bootstrap 'jumbotron' element, you will see that the parent .col-lg-4 .col-sm-4 element is once again visible, but it settles in underneath it's fixed sibling who appears first in source order.
Hope that helps.
I'm trying to use jquery mobile. Inside my page-header I want to put two divs one accross another (on the same line) left one would contain background image and right some button. So I tried
<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:100%;height:50px; style="float:left;"> LEFT </div>
<div class="ui-block-b" style="float:right;>
button on the right
</div>
but button always shown down.
First, you have some typos in your markup:
<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:100%;height:50px; style="float:left;"> LEFT </div>
Should be:
<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:100%;height:50px;float:left;"> LEFT </div>
You are also missing a closing parenthesis on the style portion of your second div.
Second, you have your background image size set to 100%, meaning it's going to take up 100% of the width, leaving no room left for your other div element. Reduce the width of the first div and the second will fall into place.
Here is a fiddle: http://jsfiddle.net/2xs24/
It is because you are setting the width of first div to 100% and there is also typo,try this
<div class="ui-block-a" style="background-image:url('/img/someImg.png'); width:50%;height:50px;float:left;"> LEFT </div>
<div class="ui-block-b" style="float:left;>
button on the right
</div>
I am using bootstrap and want to have two columns, one left, one right. The only problem is, it is not at the same height, but it should. I could do that with margin negative, but that doesn't feel right. I also found the class='clearfix', but that does not work. What is the solution of this easy problem?
HTML
<div class="span6 pull-left">
left some content here
</div>
<div class="span6 pull-right">
right content here
</div>
In Bootstrap, pull = float.
The problem here is that the span divs are too wide. When you float left and right, you will see this behavior if the width of the divs is greater than the width of the container.
In Bootstrap, you don't actually need to do this. If the width of your grid is 12, you can simply do what you've done, with two 6-width spans (no pulling or floating required).
<div class="span6">
left some content here
</div>
<div class="span6">
right content here
</div>
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.