Here is an example.
The link for the div class="learn" is 1014px wide. While the button is only 215px wide.
What did I do wrong?
.inside {
width: 1014px;
margin: 0 auto;
overflow: hidden;
}
#people .learn {
display: block;
background: url(http://www.domain.com/images/learn.png);
width: 215px; height: 51px;
margin: 30px 0 0 20px; padding: 0;
}
<div id="people">
<div class="inside">
<div class="headline"><span class="bold">Best</span> Webhosting Around. Period.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor suscipit purus, et blandit libero tempor in. Vivamus rutrum.</p>
<!-- PROBLEM HERE -->
<div class="learn"></div>
<!-- PROBLEM HERE -->
</div>
</div>
The div with learn class is having a block display so browser will adjust the outer <a> as as display block and occupy the available width.
Change div display as inline-block then you can see the width of <a> coming as 215px
here is the example code
<html>
<style>
.inside {
width: 1014px;
margin: 0 auto;
overflow: hidden;
}
#people .learn {
display: inline-block;
background: url(http://www.domain.com/images/learn.png);
width: 215px; height: 51px;
margin: 30px 0 0 20px; padding: 0;
border:solid 1px ;
}
</style>
<div id="people">
<div class="inside">
<div class="headline"><span class="bold">Best</span> Webhosting Around. Period.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor suscipit purus, et blandit libero tempor in. Vivamus rutrum.</p>
<!-- PROBLEM HERE -->
<div class="learn">wwww</div>fddfg
<!-- PROBLEM HERE -->
</div>
</div>
</html>
In HTML4, your markup is not Valid: DIV elements MUST NOT be descendent elements of A elements there. Only in HTML5 this is Valid. You should not rely on HTML5 being supported by a layout engine at this point.
div elements are block-level elements (per user agent stylesheet, their default is display: block); barring further CSS declarations, they are as wide as their containing block.
The containing block here is provided by the ancestor div element that has the CSS class inside specified (class="inside"). There is a CSS rule for elements with that class – .inside – in your stylesheet that says that those elements should have width: 1014px. So the descendent div element is displayed as wide as the ancestor div element, 1014px.
a elements are inline-level elements (per user agent stylesheet, their default is display: inline); barring further declarations, they have the combined dimensions of their content. The sole content of this a element is said div element. Therefore, the parent a element – the link – is as wide as the child div element (that does not really belong there).
The background-image of an element does not automatically stretch to the dimensions of the element's box, which is probably causing your confusion about the “button” represented by that background image.
Related
I'm trying to design a page header style where two images start from either side of header text, and extend outward to the full width of the screen. Meanwhile, the position of the header text needs to stay left-aligned with the position of the other page content that flows below it, which has a width of 100% but a max-width of 1280px. I don't want the images to be cut off by the text.
Here's an image of what I'm trying to achieve:
Image showing tight width screen vs. large width screen
I want the text to not cut off the circles seen on its left and right sides.
What I've tried:
I've tried positioning the two images using ::before and ::after, however, I haven't found a way to set the start of those pseudo-elements to the start and end of the text span.
I could just set a background image on a full-width container containing the header text, but then I'd have to apply a white background to the header text span, which leads to cutting off of the image as it goes behind the text -- not ideal.
Display:flex gets me closest to the behaviour I want (with left and right divs hugging either side of the div containing the text span and filling the rest of the screen space), however, no straightforward way to make sure the left edge of the text is aligned to the left edge of the rest of the body content. The flex solution works if I wanted centered text, but I need left-aligned text.
CSS grid is something I've considered but it seems like I wouldn't get the hugging behaviour I want while still aligning well with page content.
Thanks!
--EDIT: I tried to include some code of the best solution I have gotten so far which was with display:flex. I had to simplify it from my source code and couldn't get this to run, unfortunately, apologies as I'm quite new to posting on S.O.. --
body {
margin: 0px auto;
width: 100%;
background-color: #333;
}
.page-header {
display:flex;
background-color:#fff;
}
.left {
flex:auto;
background-image: url("[image]");
background-repeat:repeat-x;
background-position: right bottom 20px;
}
.text {
flex:initial;
text-align: center;
max-width: 1280px;
}
.right {
flex:auto;
background-image: url("[image]");
background-repeat:repeat-x;
background-position: left bottom 20px;
}
.body-content-wrapper {
max-width: 1280px;
padding: 2.5%;
background-color: #333;
}
and
<body>
<div class=“page-header”>
<div class=“left”>The left image</div>
<div class=“text”><h1>The page header text</h1></div>
<div class=“right”>The right image</div>
</div>
<div class=“body-content-wrapper”>
[rest of page content]
</div>
</body>
EDIT
Here's an image of what I'm trying to avoid with the header image: it being "cut off" on either side of the text (the left-side dots in the header should start at the left side of the text and extend to the edge of the screen, while the right-side dots should start at the immediate right side of the text and extend rightward to the edge of the screen).
You don't need :before and :hover. As long as you know your max-width then you should be fine with a combination of max-width, setting your left and right margins to auto, and using flexbox for the image columns.
Note that I'm using max-width: 500px in the example below so it fits within the StackOverflow page a bit nicer.
.header {
background-image: url(https://i.imgur.com/Iypn3mA.jpg);
background-position: center center;
background-repeat: repeat-x;
background-size: 50%;
}
.header .container {
display: flex;
}
.header h1 {
background-color: #fff;
padding: 0 10px;
}
.container {
margin: 10px auto;
max-width: 500px;
}
.columns {
display: flex;
flex-direction: row;
}
.columns > * {
flex-grow: 1;
}
.columns > :not(:first-child) {
margin-left: 10px;
}
img {
display: block;
width: 100%;
}
<div class="body">
<div class="header">
<div class="container">
<h1>I am some variable text</h1>
</div>
</div>
<div class="container hero">
<img src="https://via.placeholder.com/2400x800?text=hero" />
</div>
<div class="container columns">
<div>
<img src="https://via.placeholder.com/1000x1000?text=1" />
</div>
<div>
<img src="https://via.placeholder.com/1000x1000?text=2" />
</div>
<div>
<img src="https://via.placeholder.com/1000x1000?text=3" />
</div>
</div>
</div>
I figured out a solution using calc()
You won't see the dots image in this example but can see how the left and right header divs allow me to position the background image relative to the start and end of the page title text, without being cut off by the page title div.
.header-parent {
background-color:#fff;
display:flex;
padding-top: 200px;
}
.body-parent {
position: relative;
margin:0px auto;
background-color: #fff;
width:100%;
max-width:300px;
}
article {
padding: 10px;
}
.left-dots {
width: calc((100% - 300px) / 2);
background-color:#78AA56;
background-image: url("img.png");
background-repeat:repeat-x;
background-position: right bottom 20px;
}
.title {
flex:initial;
min-height: 50px;
margin:0 10px;
}
.right-dots {
background-color:#CC4483;
background-image: url("img.png");
background-repeat:repeat-x;
background-position: left bottom 20px;
flex:auto;
}
<div class="header-parent">
<div class="left-dots"></div>
<div class="title"><h1>Page title</h1></div>
<div class="right-dots"></div>
</div>
<div class="body-parent">
<article>text text text text
Body text
Where its left margin lines up with the page title margin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac dictum nisi. In vulputate in purus non laoreet. Nullam non ligula congue, porta lorem fermentum, feugiat urna. Quisque mollis nisl et risus malesuada vulputate. Nullam id efficitur odio, quis interdum augue. Praesent volutpat bibendum tellus, non pellentesque arcu. .</article>
</div>
Scenario
I am trying to vertical align an img inside a div, using the table cell method ('6 Methods For Vertical Centering With CSS' #Vanseo Design):
<style>
.container{border: solid 1px #000;display:table;}
.contentItem{display:table-cell;vertical-align:middle;}
.contentImg{float:left; width: 50px; margin: 3px;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}
</style>
<div class="container">
<div class="contentItem">
<img class="contentImg" title="test" src="tv1.gif"/>
<div class="contentDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.</div>
</div>
</div>
Issue
It simply does not work.
Here is a (not)runnig jsFiddle example.
Facts
I am using Chrome
The image width must be set at fixed value (50px for instance)
The image height is variable and not known before the image load
The contentDiv div tag cannot be removed. Actually it contains a complex structure, not a simply text, with dynamic data.
Try this
<div class="container">
<div class="contentItem">
<img class="contentImg" title="test" src="data:image/gif;base64,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"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel scelerisque enim.
</div>
</div>
CSS
.container{border: solid 1px #000;display:table;}
.contentItem{display:table-cell;vertical-align:middle;}
.contentImg{float:left; width: 50px; margin: 3px;vertical-align:text-top;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}
If you cant get rid of divs then
simply change css
.contentDiv{width: 400px; padding: 0px 2px 2px 2px;}
Your vertical alignment doesn't work as you are floating the image. if you remove the float from the image and then make the text div an inline-block element instead then your alignment will work:
.contentImg{width: 50px; margin: 3px;}
.contentDiv{width: 400px; padding: 10px 2px 2px 2px; display:inline-block;}
http://jsfiddle.net/Z8GaT/1/
Or simply:
.yourClass{
position: relative;
top: 50%;
margin-top: - "the height of your image" / 2+px;
}
Note, the margin-top value should be minus the image's height divided by 2 if that was unclear.
please check Demo here
remove
.contentDiv{width: 400px; padding: 10px 2px 2px 2px;}
may be this solve your problem :).
This question already has answers here:
Why is the parent div height zero when it has floated children
(4 answers)
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 8 years ago.
I'm very confused. I want the contents of 2 divs to dynamically expand the height of their parent div based on child divs sizes; up to a maximum of 600px -- but instead they're just overlapping and it isn't increasing in size. Would somebody mind providing some insight? Clearly I'm missing something here.
Here is what's happening:
http://puu.sh/2Vexi.png
Here's my html:
<div class="pictureBoxContainer">
<div class="pictureBox">
<div class="pBoxLeftColumn">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit perspiciatis nihil explicabo quasi veritatis ipsum.
</div>
<div class="pBoxRightColumn">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, architecto quis quaerat excepturi maxime.
</div>
</div>
</div>
Here's my css:
.pictureBoxContainer {
padding: 12px;
clear:left;
clear:right;
width: 100%;
background-color: #eee;
border-radius: 4px;
max-height: 600px;
}
.pictureBox {
border: 1px solid #ee5;
width:100%;
}
.testp {
padding: 10px;
}
.pBoxLeftColumn {
display: block;
float: left;
max-width: 49.99%;
}
.pBoxRightColumn {
display: block;
float: right;
max-width: 49.99%;
}
Parents will normally expand to the height of their children, though won't in case the children are floated.
You can remove floats to accomplish expanding.
In order to expand a parentdiv based on floated children try overflow: auto; on .pictureBox. This will make .pictureBox expand to the height of its children. Here's a Fiddle showing the result.
It's my first time designing a fluid layout and one of the things I'm trying to do is overlay a caption at the bottom of a photo. The method I'm using is having the photo (width:100%) inside a div (width:50%) and adding a div containing the caption under the photo. To get it to overlay, I made the caption's height a static 30px and set the position as relative and top -50px (+padding).
CSS:
#contentdiv {
width:50%;
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:relative;
top:-50px;
margin-bottom:-50px;
}
HTML:
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
This does what I want visually, but it's not really a true fluid layout and it looks ugly if the caption is too or too short. Is there a way where I could let the length of the caption to determine the height of the caption div and have the "top" be the negative of whatever the height and padding is?
Pure CSS solution for a problem like the one you have
CSS
#contentdiv{
width: 50%;
position: relative;
}
#gallerydescription{
padding: 10px;
background-image: url('../contentbkg.png');
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
max-height: 60%;
overflow: hidden;
}
Markup (unchanged)
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
Update
jsfiddle try this fiddle
Try this and see how it looks like:
#contentdiv {
width:50%;
position: relative
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:absolute;
left: 0; right: 0; bottom: 0;
z-index: 5;
}
You could try jQuery UI Position for that purpose.
It allows to position two elements relatively, like
$("#elementToPosition").position({
my: "left top",
at: "right bottom",
of: "#targetElement"
});
And then change the top property for overlaying :
$("#elementToPosition").css('top',$("#elementToPosition").css('top') - 10px);
I am new to css.
I have made 2 div's. Both contain some text.
The first div is a box that will vary in width. I want the second box to always be 50px to the right of the first box, no matter what the width of the first box is.
How can I do this with css?
(I currently have the left box set as absolute positioning)
HTML:
<div id="box1">
<div id="box2"></div>
</div>
CSS:
#box1 {
position:absolute;
left:0; top:0;
width:200px; height:200px;
background:red;
}
#box2 {
position:absolute;
right:-150px; top:0;
width:100px; height:100px;
background:blue;
}
This solution only works if the width of the right DIV is fixed. In that case, set the right property to - ( width + 50 ) px. In my example, it's -150px.
Live demo: http://jsfiddle.net/simevidas/U47Ch/
Like this,
* {padding: 0; margin: 0;}
div {float: left; height: 100px;}
#left {padding: 0 50px 0 0; width: 100%;}
#right {position: absolute; right: 0; top: 0; width: 50px;}
<div id="left">
<div id="right">
</div>
</div>
This will do the trick.
I think this works with any length text in either column, in any size container:
<style type="text/css">
#left {padding-right:100px; float:left; display:inline; position:relative;}
#right {position: absolute; right: 0px; top: 0px; width: 50px; overflow:hidden;}
</style>
<div id="left">
<div id="right">
Lorem ipsum dolor sit amet, consectetur
</div>
Aliquam congue odio sed dolor rhoncus malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum elementum pellentesque.
</div>
Tested in FireFox only. The right padding of #left must always be width of #right plus 50.
<style type="text/css">
#divBox2 { margin-left: 50px; }
</style>
Margin simply adds 50px to the left of box2, meaning there will always be 50px of space left of box2, thus between box 1 and 2, also remove absolute positioning of box 1.
<div id="divBox1">
</div>
<div id="divBox2">
</div>