I have to build mobile views for an existing website. HTML is like:
<div class="container">
<div class="right_column">
<img .....>
</div>
<p>...</p>
<p>...</p>
</div>
right_column has a float: right.
For mobile view I'd like to move right_column to the end of the container. Trying it with position:absolute doesn't work well, because the container doesn't grow.
Any ideas?
Alex
If the height of the container is fixed you can play around with padding-bottom and use position: absolute; bottom: XX but I am afraid you cannot guarantee the height of the container.
Another option would be to put the div at the end of your HTML and make it float to the right in normal view, that's what I would do.
Use table display properties. display: table on the container, display: table-footer-group on the right column.
Beware, this might have some fun side effects on the container.
http://jsbin.com/abivis/1
Related
I am using bootstrap, the container is 915px width, I am running in mobile browser.
The problem is the div with background color is supposed to occupy the whole width, but there are some white margins.
how can i extend the div a few pixel in each side?
<div class="container">
<div class="" style="width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>
Have you tried using a different container class from Bootstrap?
Perhaps "container-fluid" as described below and on the Bootstrap component page - http://getbootstrap.com/css/
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
You could also mix and match via Media Queries and JavaScript if you wanted to. For example on certain Media Query dimension triggers compensate for the style overrides you wish to be used.
Reference:
http://getbootstrap.com/css/
Try adding a negative margin
margin-left: -15px;
margin-right: -15px;
From what you've posted, it looks like the inner div is 100% of the container.
Either put the inner div outside of the container or make the container 100% width (there are other bootstrap containers for this).
You can try use .row:
<div class="container">
<div class="row" style="
width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>
I have 3 scripts in my HTML file and I'm having trouble with positioning.
As you can see my vertical gauge is on top on my second circular gauge.
I tried multiple positioning options but I'm not able to fix this.
How can I make my vertical gauge be on the right side of my first circular gauge?
This is how my code looks at the moment.
<body>
<div id="containerTno" style="height:300px;width:800px;margin:0px;position:static">
<div id="circularGaugeContainer" style="height:300px;width:300px;position:relative"></div>
<div id="linearGaugeContainer" style="height:300px;width:300px;position:relative"></div>
</div>
<div id="circularGaugeContainer2" style="height:300px;width:300px;margin:0px; position:static"></div>
</body>
For expected layout try assigning following css for the first container as
width:60%
and second container as
width: 30-40%; float: right;
and display as
display: inline-block
for both the container
I believe if you use this two lines instead it should work
<div id="circularGaugeContainer" style="height:300px;width:300px; float: left;"></div>
<div id="linearGaugeContainer" style="height:300px;width:300px; float: right;"></div>
I didn't use JFiddler but I'm quite sure this works. let us know its an easy fix
I have an image and also a small container that I want to be placed on the container, but it sets this ".innerimage" below the image.
Do not suggest using top: xx; because in my actual project I have many divs with the same class and I can't use top or it will screw it up.
<div id="page">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Black_300.jpg">
<div class="innerimage"></div>
</div>
</div>
If I well understand your need and if you don't have to support IE7, maybe you could use the display:table and display:table-caption
I updated the JSFiddle with these CSS properties:
http://jsfiddle.net/ZhdMj/1/
Okay, so this is going to be hard to explain, so please ask questions if I am not clear
In my html page, I have a main "container" div that has multiple divs within it, but each of the divs inside the container are placed into one of two columns (so if there is a div in the container, it is either in the left column or the right column)
<div id="container">
<div id="column1">
<div id="item1-1"></div>
<div id="item1-2"></div>
<div id="item1-3"></div>
</div column1>
<div id="column2">
<div id="item2-1"></div>
<div id="item2-2"></div>
<div id="item2-3"></div>
</div column2>
</div container>
[NOTE: I know the syntax is incorrect, I am just making it easier to read]
So, in other words, I want two columns of divs that can vary in size (so the page size can vary), and so that item1-2 appears below item1-1, etc. The problem here is I want the divs in the container to appear inside of it, so I cannot use absolute or relative positioning. Something is telling me I should be using a table, but I am not sure how to go about doing this.
So, my question is: using only html and css, is there any to do exactly what is above?
First: make </div column1> and </div column2> just say </div>
Second: CSS:
#container {
width: 100%;
}
#column1, #column2 {
float: left;
width: 50%;
}
To achieve the look you want you should use CSS float property. However, to avoid problems with parent container not displaying correctly, consider following one of the two possible solutions:
Adding a div after floating elements with
clear: both
or applying code below to your parent div
overflow: hidden
I'm making a website and trying to create a login box. I have a website with two boxes of content, and I want to add a third "login box".
However, I can't seem to do this, because it appears above (when I have the current width of the container) or above (when I increase the width of the container to accommodate for the increase of space because of the box).
Also, margins don't seem to be affecting the newly created box either.
Here is what I want it to look like: http://i.stack.imgur.com/Kmm1g.jpg
And here is the current website: http://www.winterlb.com/
So my question is, what is the easiest way to accomplish this? Thanks.
You can put your login box and your nav box in the same div. Float this div and the main content div like so:
HTML:
<div id="navBar">
<div id="loginBox">
...
</div>
<div id="navBox">
...
</div>
</div>
<div id="mainContent">
...
</div>
CSS:
div#navBar {
float: left;
width: 200px;
}
div#mainContent {
float: left;
width: 600px;
}
Add the 'third box' inside your 'sidebar' and add another div to wrap your original sidebar content.
Style the approriate login div and navigation div. Float them left if needed.
Here's a sample html of what the structure should look like http://pastebin.com/3hLmGzRZ
You will never accomplish this properly without a doctype. You are in quirks mode. Add this to your first line and then see where we are:
<!DOCTYPE html>