Can someone help me understand why would wells correctly in Safari and not correctly (overlapping) in Chrome?
This is how it looks in Chrome http://i.imgur.com/OOeTw8b.png
Basically the wells are overlapping in Chrome. (on top of each other)
The code is simply
<div class='row-fluid'>
<div class='span4'>
<div class='well well-large' style='width:100%; display:table; background:#ffffff;'>
<b>Hosts Down</b>
data
</div>
<div class='well well-large' style='width:100%; display:table; background:#ffffff;'>
<b>Critical Services</b>
data
</div>
<div class='well well-large' style='width:100%; display:table; background:#ffffff;'>
<b>Links</b>
data
</div>
</div>
<div class='span8'>
<div class='well well-large' style='width:100%; display:table; background:#ffffff; text-align:center;'>
graphs
</div>
</div>
</div>
It’s just a guess, but looking at your code I’d imagine it’s because of your inline styles. You’re specifying a width of 100%, but the wells will also have padding, which will add up to more than 100% of the parent container.
And in saying that, don’t use inline styles.
Related
Hello all and thanks for the input.
I've looked at a number of templates but haven't felt that I've found a clean way of presenting vertically centered content of a "section" on single page layouts. I am referring to the entire section space space here, not the elements within.
The desired effect is to limit the viewable content to sections at a time and use a scroll to move to the next section on the single page ... easy enough with easing.js.
So for a psuedo markup there would be something like
<section id="topic1"
<random element>
<random element>
</section>
... Some space added to ensure no overlap of sections are viewed here ...
... e.g. margin-top: 100px or 10%
<section id="topic2"
<random element>
<random element>
<random element>
<random element>
</section>
... Some space added ...
... e.g. margin-top: 100px
...etc
As the browser moves to each section (by anchors) each one would be shown with " empty space" and it delivers a nice effect. The challenge is to always have the sections vertically centered as we change devices in a 'responsive' type approach. I've also found some inconsistencies with Internet Explorer. Understandably at certain screen sizes (say table landscape height and phones) this becomes impossible and scrolling will be necessary.
Any thoughts on a CSS approach to implement this cleanly would be appreciated.
You can do it by using a wrap and using the css properties display:table and display:table-cell together with vertical-align:middle
HTML markup with your needed wrap:
<section id="topic1">
<div class="wrap">
<div> aaaa</div>
<div> aaaa</div>
</div>
</section>
Needed css:
section{
display:table;
height:220px;
background: #ccc;
width:100%;
}
.wrap{
display:table-cell;
vertical-align:middle;
}
Living demo
Using line-height is a more simple method but you need to know the height of the section.
You can find more ways about how to accomplish it here.
There are a couple different ways to can use the Bootstrap markup to achieve what you are looking for. Here is one example:
.space {
padding-bottom: 200px;
}
<section class="container space">
<div id="scroll-to" class="row">
<div class="col-xs-6 col-xs-offset-3">
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
</div>
</div>
</section>
<section class="container space">
<div id="scroll-to" class="row">
<div class="col-xs-6 col-xs-offset-3">
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
<p class="text-center">Random Elements</p>
</div>
</div>
</section>
I would try and concentrate on the offset classes and look at using .center-block and .center-text. Center-block will align your elements center, and center-text will do the same for text. This will keep you from bloating your css and keep everything predictable for responsive design.
Hope this helps.
I have a DIV that I want to use to display some formatted content in. However, I have problems with some text TAGs inside the DIV.
You can see my problem in jsfiddle.
Can you please help me solve this?
I need the content of the second "column" to be able to word-wrap and when it would do that, I want the next "line" to be moved down so it would not overlap it.
Basically I want to text to look normal inside the DIV.
<div class="container-right">
<div class="topul" style="background-color:#2ecc71; width:352px;"></div>
<div class="parent" style="min-width:350px; width:350px; height:445px;">
<p class="myp" style="color:#2ecc71; font-size:2em; margin-bottom:0px"> <b>Worker information</b>
</p>
<div class="topul2" style="float:left; background-color:#2ecc71;"></div>
<div class="d-table">
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Name:
<p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71"><b>Some name</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71;">Address:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; display:inline-block"><b>Here goes a long text as address that does not word-wrap and exits the DIV</b>
</p>
</div>
</div>
<div class="d-tablerow">
<div class="d-tablecell" style="text-align:right; width:30%">
<p class="myp3" style="color:#2ecc71">Other info:</p>
</div>
<div class="d-tablecell" style="text-align:left; width:70%;">
<p class="myp4" style="color:#2ecc71; "><b>Here is other information</b>
</p>
</div>
</div>
</div>
</div>
</div>
You can see the CSS in the jsfiddle link above.
I give up... I am a newbie with CSS and HTML and so far this is done manually by me after digging on google. But now I have no idea how to solve this.
Please help.
Thanks
The problem is with your .myp4 styles
To avoid the overlap remove height: 2px;
To avoid bleeding from the div set max-width: 200px;
As mentioned above set heights are a bit of a nightmare unless you're going for a specific look. It's better to use min-height or max-height
NOTE: You should seriously split all your CSS into a separate file rather than having them in the elements
Also is there a particular reason for you to use crazy displays? You could achieve the same effect easily by having a div wrapping two other divs that are float left. display: block; will give you less of a hard time if you're a newbie. Aim for less code, not more.
Try setting min-height instead of height on the rows and/or cells.
The width of the table is the culprit, it's allowing its children to run wild on your page. .d-table {
width: 350px;
}
This would be the main markup:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
Where (allthough there are many more rules wich can be seen in the link this are the widths)
.espacio{
margin-left: 192px;
background: transparent;
width:808px !important
}
.lacarta{
width:595px;
float:left;
}
#sidebar{
width:210px;
float:right
}
The problem is that .lacarta and #sidebar are not floating one next to other (this only happens in IE8 or lower)
It can be tested here: http://goo.gl/ksFQI (if you compare to firefox/chrome you will se that the sidebar is not in the right side of the container..)
I checked with the IE8 developer tools that the container seems to be big enough for both elements..
Any idea what I missed?
-EDIT-
Current IE:
Wanted (like in Firefox):
Actually, there is a bug in IE8 where right-floated elements seem to clear:left.
http://blogs.msdn.com/b/askie/archive/2009/03/23/right-floated-element-in-internet-explorer-8-is-positioned-differently-than-internet-explorer-7.aspx
If you don't want to add anything to your HTML at all, you can slightly restructure it for a quick fix. Put the right-floated sidebar first, ie:
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div id="sidebar">RIGHT CONTENT</div>
<div class="lacarta">LEFT CONTENT</div>
</div>
Add parent container:
<div class="mancha">
<div class="logo"></div>
<div id="content-area" class="espacio">
<div class="eltitular">HEADER</div>
<div>
<div class="lacarta">LEFT CONTENT</div>
<div id="sidebar">RIGHT CONTENT</div>
</div>
</div>
</div>
Does this jsfiddle fix it: http://jsfiddle.net/hgrHq/
.lacarta{
width:590px;
float:left;
}
Just reduced the width of .lacarta a bit.
As an aside, you might want to consider a responsive grid system for laying out your coulmns like this. For example:
http://cssgrid.net/
http://semantic.gs/
Then you won't have lining up issues like this ... and it'll respond to all screen sizes.
What exactly the Prob is...?? I just Tested the link and found those menu were not aligned .. and here the solution is .menu li{ float:left} .. for more jus put a screen shot if Possible :)
I don't know if this can be done with CSS, but before going the JavaScript way, I would like to know if it's possible to center (as a whole) a set of absolute positionned divs:
<div id="container">
<div id="item1" style="position:absolute;left:100px;top=50px>...some content...</div>
<div id="item2" style="position:absolute;left:0px;top=0px>...some content...</div>
<div id="item3" style="position:absolute;left:150px;top=100px>...some content...</div>
<div id="item4" style="position:absolute;left:75px;top=75px>...some content...</div>
</div>
I would like to center the bounding box of those items in the page.
Of course since they're styled with "position:absolute", they're out of the flow, so the container div has a size of 0 px... and the usual tricks didn't work.
Finally, the snippet above being just illustrative, in practice the items would be arbitrarily positionned (some of them dynamically), and their size and content is not known (and can be dynamic too). Because of all this dynamicity, I would prefer to have everything handled by CSS is possible, rather than having hook a whole bunch of events.
Hey now you can change your html and css than u can easily as like this
HTML
<div id="container">
<div id="item1">...some content...</div>
<div id="item2">...some content...</div>
<div id="item3">...some content...</div>
<div id="item4">...some content...</div>
</div>
Css
#container{
background:red;
overflow:hidden;
}
#item1, #item2, #item3, #item4{
background:pink;
margin:10px;
margin-left:100px;
}
Live demo
How about to give a fix width to #container and giving a position:relative;
Please check this http://jsfiddle.net/65vk2/
We've just started to redesign our site following the responsive web design + mobile first philosophy and guidelines.
In a particular page, we are facing the following situation: in the "mobile view" of the page we want to have the elements arranged as the left part of the image shows.
That's why in the HTML these elements are declared as follows:
<div id="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>
Up to this point, all of it is straightforward. The problem is that, using media queries, for higher screen resolutions we want to rearrange the items as shown in the right part of the image.
The general question, which solves our particular problem with this page, is: is it possible to float arbitrary elements to each of the two columns without having to change the HTML markup between the two versions? A pure CSS solution would be much desired.
Note: the height of the elements is unknown, and the width is percentual.
EDIT: For clarification, and regarding our particular case, we need the item E to be attached under item B, and not vertically aligned to D. This fiddle shows what we don't want.
You could float A, C and D to the right. However you might need to apply overflow:auto to B and E. Also note, that if B is higher than A, C is getting pushed down to align accordingly.
Fiddle
Could you do something like this?
<div id="container">
<div id="A">A</div>
<div id="B" class = "left">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>
You can just set float:left in the media query you want and ignore it in the other one.
Edit:
In response to OP's feedback that B and D were not sitting directly on top of each other, revising the code to float: right instead fixes this. ie
<div id="container">
<div id="A" class = "right">A</div>
<div id="B" >B</div>
<div id="C" class = "right">C</div>
<div id="D" class = "right">D</div>
<div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>
For the normal layout, you should do it like this.
Both divs should be left floated.
<div id="container1">
<div id="left">
<div id="B">B</div>
<div id="E">E</div>
</div>
<div id="right">
<div id="A">A</div>
<div id="C">C</div>
<div id="D">D</div>
</div>
</div>
The problem is that the mobile version uses another arrangement.
So one solution is to make onther version for the mobile page and hide #container1 (and vice versa for the other site).
<div id="container2">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>