I suppose that this is already in some topic, but I couldn't find the answer that I'm looking for.
I have a header that looks like this:
And its code is the following one:
<header>
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<div class="content-wrapper">
<div class="float-left" id="image-maintitle">
<img src="~/Images/DirecTV.jpg" width="70" height="43" />
<div id="main-title">
<h1 class="site-title">#Html.ActionLink("Disponibilidad de Señal", "Index", "Home")</h1>
</div>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>
Ir a sistema de monitoreo
</li>
</ul>
</nav>
</div>
</div>
</header>
The problem is that both div are stacking when I reach a width of 850px, like you can see in this image:
I tried setting up a min-width in content-wrapper class or in "header" tag, but isn't working. The strange thing is that when I try to select "inspect element" of this div on the browser, I can't do it... only I can do it with the elements on the inside.
Here is my CSS document of this classes:
.float-left {
float: left;
}
.float-right {
float: right;
}
header, footer, hgroup,
nav, section
{
display: block;
}
ul#menu
{
font-size: 18px;
font-weight: 600;
margin: 0 0 5px;
padding: 15px 0 0 0;
text-align: right;
}
.content-wrapper {
min-width: 1000px !important;
}
I want to hide the right div behind the scrollbar when its container reaches 1000px of width.
Is there another way to prevent this behavior?
Just set a media query to the "right div", like this:
#media (max-width: 1000px) {
#right-div {
display: none;
}
}
This will only show the right div when the screen resolution is > 1000px in width.
Have you tried max-width instead of min-width? min-width specifies things you want to show if the window is a certain size or larger, whereas max-width specifies things you want to show if the window is at a certain size or smaller.
You may need to set the CSS display property correctly.
Try display:inline-block; or display:block; in the css for each of the elements.
Also setting the max-width:1000px; in the right div
to do this inline use <div style="display:block">
Edit after seeing the Css: Try changing the widths to suit your setup
.float-left {
float: left;
position:relative;
width:80%;
}
.float-right {
float: right;
position:relative;
width:20%;
}
Related
I need to centre a div. This div is the width of its 2 containing 'rows'. The width of these 'rows' is defined by their content. The content has both left and right aligned elements. I also need the content which is less tall to be vertically centred.
So far Ive done all of this. I also need a background colour on the rows and a space between them. Ive done the space with div.spacer but im wondering if its possible to achieve the same thing without an empty div to keep my markup cleaner?
Im struggling as display table-row and table-cell don't allow for margin.
I also tried using pseudo content to absolutely position a white block over the top to make it look like there was a space between the rows, but relative display doesnt apply well to an element with display table-row cross browser.
I tried using the border-spacing css property but it adds margin both above and below rows, and I just need the margin below.
Below is my markup. The image shows exactly what I need to achieve, so can I do the same thing without div.spacer?
http://codepen.io/anon/pen/ZWMPgB
<div class="cont">
<div class="row">
<h2>Heading</h2>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="spacer"></div>
<div class="row">
<h2>Longer Heading</h2>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
body {
padding-top: 10px;
}
* {
margin: 0;
padding: 0;
}
.cont {
display: table;
margin: auto;
}
.row {
display: table-row;
background: grey;
}
h2 {
display: table-cell;
padding-right: 50px;
font-size: 3em;
}
ul {
display: table-cell;
vertical-align: middle;
}
li {
display: inline-block;
}
.spacer {
display: table-row;
height: 10px;
}
Maybe you need something like this:
.row > * {
border-bottom: 5px solid #ffffff;
}
This will add 5px space after your rows.
I have two div's that are floated to the left inside a wrapper-div like this:
HTML:
<div id="container">
<div id="logo">LOGO</div>
<div id="nav">Link1 Link2 Link3 Link4</div>
</div>
CSS:
#container { }
#logo { float: left; margin-right: 10px; }
#nav { float: left; }
JSFiddle: http://jsfiddle.net/vZWTc/277/
What happens when reducing the width of the window is that first #nav jumps down below #logo and then it starts wrapping inside. Is there a way (using layout rather than javascript) to first make it wrap inside #nav down to a threshold (say 150px width) and then when that limit is reached allow it to jump below #logo?
The only solution I've come up with is to have a fixed size left bar (the left logo div that is). If it's fixed, the right pane can have a left margin to make room for it and take up the rest of the space, and with it wrap the text if that's necessary. The shortcoming of this is that it won't jump below the left floating div if the window shrinks too much since the nav or the navcontent css is not floating.
Example is available at http://jsfiddle.net/vZWTc/278/ with some additional text for show but it is available in short here.
<div id="container">
<div id="logo">LOGO</div>
<div id="nav">
<div id="navcontent">
<p>Link1 Link2 Link3 Link4</p>
</div>
</div>
</div>
#logo {
float: left;
margin-right: 10px;
}
#nav {
display: block;
}
#navcontent {
margin-left: 100px;
}
Following is the code I'm using in my html with twitter-bootstrap. I am trying to center align the output but the image is left-aligned no matter what I do.
<ul class="thumbnails">
<li class="span5">
<img src="img.jpg" />
</li>
</ul>
Any simple solution?
Twitter bootstrap thumbnails are floated to the left by default, you have to overwrite that behavior on your own stylesheet in order to make them center align its container with the text-align:center and display:inline-block properties. Try this:
CSS
.thumbnails {
text-align:center;
}
.thumbnails > li {
display: inline-block;
*display:inline; /* ie7 fix */
float: none; /* this is the part that makes it work */
}
This way the thumbail images will center inside the .thumbnails container. Replace the .thumbnail class with the container you want to center your images in.
If you use text-align: center; and give your img display: inline-block; it should become center aligned.
See: http://jsfiddle.net/HWMZg/
This is simple just add:
<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div>
Hope this was helpful
I found this works easiest for Bootstrap:
.thumbnails > li {
float: right;
margin-bottom: 18px;
margin-left: 20px;
}
I simply changed "float" from "left" to "right"
Create a new row for the image. Use the appropriate offset depending on the size of your image e.g.:
<div class="span8 offset2" >
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.
I'm using the technique in Stack Overflow question CSS centering text between two images but am unable to make the text center.
I would like the text "0 of 0" centered in this markup (as a fiddle):
HTML:
<div id="invoiceImageContainer">
<img src="http://i.imgur.com/8QT8u.png" id="invoiceImage">
<div id="invoiceNav">
<img title="Next" src="http://i.imgur.com/oZb7r.png" id="nextInvoice">
<img title="Previous" src="http://i.imgur.com/aKi11.png" id="prevInvoice">
<span id="invoiceCount">0 of 0</span>
</div>
</div>
CSS:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount {
text-align:center;
}
What am I doing wrong?
You are using a span for the text container which is an inline element. Therefore its width is the same as the width required for its content, changing it to a p (or changing display to block) will allow for horizontal centering. If you want to center vertically then set the line-height equal to the height of the images and set vertical-align: middle.
Updated fiddle: http://jsfiddle.net/W5jQd/3/.
Good old quick hack:
#invoiceImageContainer{
width:420px;
margin: 0 auto;
}
#invoiceImage {
height:600px;
}
#invoiceNav {
color:black;
font-size:10pt;
text-align:center;
}
#prevInvoice {
float:left;
padding-left:100px;
}
#nextInvoice {
float:right;
padding-right:100px;
}
#invoiceCount
{
line-height: 35px;
}
In your original markup you had #invoiceCount set to text-align:center. This is wrong because you can't center spans in that way, so I moved it to your container div.
The quick hack is the line-height, set to approximately the known size of your image. This technique is good and safe when you are doing a single line of text and the size of the elements involved is known.
This will fix it:
/* should be block level element */
#invoiceCount{
display: block;
}
See here: http://jsfiddle.net/W5jQd/5/
You could add the following to the CSS of #invoiceNav
text-align: center;
line-height: 32px;
the first centers the <span> element and the second centers the text vertically in the <div> (same height as the images)
The problem is caused by the fact that doesn't support "width", since it's an inline block. The following changes will do the trick: in HTML change <span id="invoiceCount">0 of 0</span> to <div id="invoiceCount">0 of 0</div> and in CSS add width to the #invoiceCount like this:
#invoiceCount {
text-align:center;
width: 100%;
}