I am currently working on a project in which the navigation bar is floated to the left and then the content is on the right of that, also floated so it is flush up against the navigation content. I currently have the first page fine and floats perfectly, but when I try to float the next page's content, it jumps down and will not float at all. Both are in separate div's and on separate html documents and both have same float attributes. I do not understand why if both have the same exact code and have enough room for floating, why can't the second page's content do the same?? I am and must use one stylesheet for all pages.
CSS for body
body {
width: 980px;
margin-left: 8%;
margin-right: 8%;
margin-top:2%;
padding: 0;
font-family: "gill sans", sans-serif;
font-size: .8 em;
background-color: #CCC;
}
CSS for navigation
#containernav {
float: left;
padding: 0;
width: 120px;}
CSS for page 1 and 2
#content_main, #content_main2 {
padding:0;
margin:0;
width:750px;
float:left;
background-color:#A30000; }
My guess would be the content inside the floated div on page 2 is larger then 750px, thus causing its parent to stretch, and the div to be pushed down.
Related
I want to control the height of a div so it's always at least 8rem tall and then grows as text wraps onto new lines. This text will be overlayed on an image that's pulled in with an img tag, so setting the height to grow based on the content will take into account the img tag as well as the text.
If I was using using background-image instead of inline img tags, this would be pretty easy to solve, but img tags are better for accessibility and have more functional support in static website systems like Gatsby.
So, I'm trying to set the height in such a way that takes into account the text only, and doesn't consider the child img tag.
I'm not a CSS master, so I'm wondering if there's a way to do that that I'm not considering.
Here's a codepen with more context: https://hod.ge/css-hgt
You can use min-height property to that div.
Ex:
div{
min-height: 8rem;
}
Ref: [1] https://www.w3schools.com/cssref/pr_dim_min-height.asp
More content you add the div height increases.
I exactly didn't get the image part. I will get back to you if I find any leads...
The idea of an overlay is a 'relative' positioned container with an image and a 'absolute' positioned text. The image is a responsive image so the image will maintain the correct aspect ratio on smaller screens. The text will be positioned somewhere in the container, use the top & left & width settings to adjust it for your layout.
After giving the overlay container the correct size, the image and text will respond to that size. As you asked for, the min-height is 8rem.
An example:
body {
font: 400 1rem/1.1 "Segoe UI", Arial, sans-serif;
}
.overlay {
position: relative;
width: 120px;
min-height: 8rem;
background-color: #eee;
font-size: 0.75rem;
}
.overlay-img {
width: 100%;
height: auto;
border: 0;
}
.overlay-text {
position: absolute;
top: 0.5rem;
left: 10%;
width: 80%;
text-align: center;
color: grey;
}
.overlay p {
margin: 0;
padding: 0 10px;
}
<div class="overlay">
<img class="overlay-img" src="https://picsum.photos/id/206/300/200">
<div class="overlay-text">Some text</div>
<p>The description of this photo.</p>
</div>
I'm trying to style my headings with display:inline-block; but i've a problem with a behavior of the property.
Jsfiddle : http://jsfiddle.net/Tu2GU/
See the titles, when a title has a long text, the heading goes under the floated div. I want the heading to break and then display 2 lines (or more) and stay on the left of the floated div, not under it.
Can't find anything helping, thanks !
edit : i updated the jsfiddle : http://jsfiddle.net/Tu2GU/13/ (removed % width for the floated div)
I don't want to have 2 divs side by side, the floated div on the right is meant to be right there, like a page summary giving link inside the page.
Also, heading are under the floated div (in html code) not over.
Since the right list uses a percent width, you can set a max-width with a percent width
h2 {
... Your original CSS ...
max-width:calc(75% - 40px); /* 40px comes from horizontal padding */
}
Demo
I'd recommend using a class to apply to each header instead of using the same max-width on each h1, h2, etc, but that's just personal preference
If the width of the right floated div is set, use calc(100% - 440px) or whatever the left horizontal padding + right width is
Create a float: left; container using the CSS below:
.lfloat {
float: left;
width: 75%;
}
You just have to wrap your text in a new div:
<div class="lfloat">
<!-- content -->
</div>
Demo
This will contain the content to the left and keep your sidebar to the right.
Note: You must clear your floats with clear: both;.
Why not try floating the elements on the left instead of using inline-block?
* {
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1em;
}
.rfloat {
float: right;
width: 25%;
background: #9C3;
color: #111;
}
h1 {
float: left;
margin: 0;
padding: 10px 5%;
background: #06C;
color: #FFF;
}
h2 {
float: left;
margin: 0;
padding: 10px 5%;
background: #F33;
color: #FFF;
width:65%;
}
http://jsfiddle.net/g4Grv/
updated your Jsfiddle: http://jsfiddle.net/Tu2GU/12/
Main thing was a wrapping div around your h1 and p tag alongside of display:inline-block and vertical-align:top
Is this what you needed?
You have a few options. You can float the heading to the left so that it will slide up - you will have to set a width, though.
h2 {
float: left;
width: 80%;
}
Another option would be to set a max width. Since inline-block elements are technically block level, you can supply a width without breaking anything. You could try this:
h2 {
max-width: 80%
}
Yet another option would be to make the element inline. This will let the browser determine the best fit for the header.
h2 {
display: inline;
}
This will make the header wrap around the list and you may get the results you want. This method will make height and width parameters not work, so you will have to substitute those for line-height and padding
First of all, I do apologize I don't put my link here, it's a site for work and I'm not allowed. I'll post the relevant parts of my code if necessary though.
So the problem is pretty basic - i have one div with some images, and a header <h3> below where my content starts . No matter how much I try to create some space between the two, it doesn't work. I've tried margin and padding on both elements, changing between position relative and absolute, and throwing in lots of <br> tags. Nothing works!
What causes my two elements to be so attracted to each other? What may cause inability to create space between two elements?
Thanks!
Edit: here's my css code for the div:
.bmwrapper {
width: 720px;
position: relative;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.bmvenstre {
float: left;
text-align: left;
z-index: 1;
}
.bmhoyre {
float: right;
text-align: left;
z-index: 1;
}
So it's one big div that acts as a wrapper, and two divs (left and right) inside. The links are displayed as blocks:
a.bmlink {
display: block;
margin: 0;
padding: 4px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
color: #08A;
text-decoration: none;
z-index: 2;
}
The header below this div is just a <h3> tag, then there's some text. Hope this helps!
You can try 2 things:
1) Put the elements overflow:hidden
2) put the elemnts display:block
If number 2 messes up with your design, try putting them float:left;
Since I don't have the code I can't give you more information, but when margins/paddings do not work, it is usually because you are either applying it to an Inline item (hence number 2) or you have a container where everything inside is floating, so the container won't have the proper height (hence number 1)
Sounds like margin collapse. Here are a couple of ways you could solve this:
Give your content div a transparent border or give your content div the css declaration of overflow: auto;
Some people when they give it a 1px border they also give it a -1px margin to counter the border.
I have a Span tag containing a IMG tag and another Span tag.
I would like the inner Span tag to be aligned to the left and the IMG tag to be centrally aligned plus I want both the tags to be vertically aligned in the middle, and I can't seem to get this right...
This is how it looks (It's blue because the outer Span tag is marked in FireBug to show that it's stretching the entire surface):
As you can see in the image, both tags are centred and they are also aligned in the top of the container, I don't want either of this.
This is the markup:
This is the current CSS of the tags:
.v-button-wrap {
height: 100%;
display: block;
padding: 6px 15px 0 9px;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-icon {
margin-left: auto;
margin-right: auto;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-button-caption {
text-align: left;
line-height: normal;
vertical-align: middle;
}
I left out the CSS that isn't relevant for my problem, colors, font-specs and such. Needless to say I'm no ace at CSS. And I've looked up several guides covering the problem, but I've only managed to find examples where the entire content of a div is centered, and that's not what I want.
Does anyone with good CSS knowledge see the problem in my code? Or have another solution to solve my problem..?
Thanks!
EDIT: Here's a screen shot of the entire layout due to request. Sorry I have to blur some things... but they are in either case not important. =)
EDIT2: I did manage to solve my problem using the following CSS:
.v-button-details-panel-header .v-button-wrap {
height: 100%;
text-align: inherit;
padding: 0px;
}
.v-button-details-panel-header .v-button-wrap .v-button-caption {
display: table-cell;
position: relative;
text-align: left;
}
.v-button-details-panel-header .v-button-wrap .v-icon {
display: table-cell;
position: relative;
top: 12px;
margin-left: auto;
margin-right: auto;
}
I'm sure the advice dgvid proposed would have been good for a static layout. But since the panels and horizontally stretched buttons move depending on expansion and collapsing that wasn't a fitting solution.
You might need to set the CSS display property of both your img and span.v_button_caption to inline-block.
See also this article: Understanding vertical-align, or "How (Not) To Vertically Center Content"
As for another technique to achieve the desired result: If you know the height of the container element and you know the height of the element to be centered (and unfortunately from the CSS you've posted, it does not appear that you do), then you could
Give the container element CSS property `position: relative'
Give the element-to-be-centered CSS property position: absolute
Set the CSS top property of the element-to-be-centered to (containerHeight / 2) - (centeredEltHeight / 2).
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to