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>
Related
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!
I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after
It seems I can't really solve this problem after two whole days of research and various tests.
I need a div which contains two div standing side by side as two columns, like in the image.
http://i.gyazo.com/bbfdcf09a2178fc0e662c59fae995988.png
The first div (in white) must assume the right size to contain properly the two columns.
I tried basically two ways:
1) make the two columns to float:left and add a clear:both empty div. The problem is, when one column become taller then the first, it wraps around it.
The code is:
<div style="position:relative; background-color:#fff">
<div style="float:left; width:50px;">
this is the first column
</div>
<div style="float:left; font-family:trebuchet MS, sans-serif;">
The second column..contains various divs.
<div> a header </div>
<div> some more contents </div>
<div> a footer </div>
</div>
<div style="clear:both;"></div></div>
2) make the two columns position:absolute and place them manually. It works, but I can't get the container to resize properly..
I don't know the context of this bit of code in relation to the rest of the code on your page, but can you make the outer div float? Because it contains two divs that do float but it itself does not, it collapses and its white background doesn't extend down to match the height of the divs within it. Having it float too means it does and you could also get rid of the <div style="clear: both;"></div> tag.
I've stripped out some of your code to leave just the crux of what I'm getting at:
<div style="float: left;">
<div style="float:left; width: 50px;">
this is the first column
</div>
<div style="float: left;">
The second column..contains various divs.
<div> a header </div>
<div> some more contents </div>
<div> a footer </div>
</div>
</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.