I am trying to create a 'section' div with a header, this header has a centred title and may or may not have a jquery UI button on its right hand side. The width of the 'section' div is determined by its parent.
My trouble is that the title with button centre alignment is taking the button's width into account.
Html:
<div style="width: 600px;">
<div class="section purple">
<div class="sectionHeader">
<div>Normal Title</div>
</div>
<div class="sectionContent"></div>
</div>
<div class="section blue">
<div class="sectionButtonIcon"> <a id="btnExample">Jquery UI Button</a>
</div>
<div class="sectionHeader">
<div>Title With Button</div>
</div>
<div class="sectionContent"></div>
</div>
</div>
See jsFiddle for css: http://jsfiddle.net/agAgeas50/uL9Uc/8/
Note: this is not a duplicate of Center inline-block div in parent while ignoring floating elements . If you look at jsfiddle's in the accepted answer, wrap the parent in another div and give the top level div a fixed width, the right hand element appears outside the parent.
add/edit the following
.section.blue {
position:relative;
}
.sectionButtonIcon {
position:absolute;
right:0px;
}
http://jsfiddle.net/uL9Uc/9/
Related
In the example image, I have navigation. Example code below shows potential markup. If the image and the text below need to move together (slide side to side), how can I anchor the position the navigation using only CSS. I suspect that I'll have to rely on some JavaScript without knowing heights of elements, but I would rather not have to.
To be clear, the navigation here appears to be centered, but they are not. They need to be floated at the bottom of an arbitrary image height.
UPDATE
Example code (see CodePen):
<div class="carousel">
<div class="indices">
<div class="dot"><div class="ghost">Carousel slide 1</div></div>
<div class="dot"><div class="ghost">Carousel slide 2</div></div>
<div class="dot"><div class="ghost">Carousel slide 3</div></div>
</div>
<div class="gutter">
<div class="content">
<div class="img"><img src="https://cdn.pixabay.com/photo/2016/05/25/13/55/horses-1414889_1280.jpg" alt="Horses"></div>
<div class="text">This text content can really be any arbitrary height, so it wouldn’t work to just use negative margins on the navigation, unfortunately.</div>
</div>
<div class="content">
<div class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Other Horses"></div>
<div class="text">Also, images can be arbitrary heights.</div>
</div>
<div class="content">
<div class="img"><img src="http://maxpixel.freegreatpicture.com/static/photo/640/Water-Turtle-Nature-Reptile-649667.jpg" alt="Turtles"></div>
<div class="text">Turtles</div>
</div>
</div>
<div class="nav">
<a class="item prev" href="#" aria-label="Previous carousel story"></a>
<a class="item next" href="#" aria-label="Next carousel story"></a>
</div>
</div>
My code is very flexible; I can move things around if need be.
Have you tried to use position: relative and position: absolute (like in this simple example)? You wrap your image slide and bullet navigation in a div where you set the position to relative. Then set the navigation wrapper to absolute position (bottom: 0 to place it at the bottom of the parent div). It will normally stay in place even if the image changes as the height of the parent div will depend on the img height.
.outer-div {
position: relative;
}
.bullet-nav {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* to center nav */
}
I have got this HTML:
<div class="A">
<div class="B1">
<div class="C1"></div>
</div>
<div class="B2"></div>
</div>
.A is a container with padding, B1 contains a long list and scrolls. .B2 should be aligned in the list (vertically and horizontally centered like a loading image).
How do I achieve that? The horizontal alignment is not working for me:
https://jsfiddle.net/1phyb6y8/
The reason why it is not working: the absolute positioned element does not ignore the padding of its parent. I've added a div .inner with position: relative and put both, .B2 (loading animation) and .B1 (container with scrollbar) in it. This way .B2's position is calculated based on the width of .inner which has no padding.
<div class="A">
<div class="inner"> /* .inner { position: relative; } */
<div class="B2">
</div>
<div class="B1">
<div class="C1">
</div>
</div>
</div>
</div>
See the updated JSFiddle.
I added a container to your structure so the .B1 and .B2 divs are in it.
B1-container takes a relative position. B2, as you did takes an absolute position and proper positionning to be at the center (I added transform: translate(-50%, -50%) so the div in the center stays in the center whatever happens to the block width).
So B2 will always be centered above B1 and move independently from it.
Hope it will help !
<div class="A">
<div class="B1-container">
<div class="B2"></div>
<div class="B1">
<div class="C1"></div>
</div>
</div>
</div>
See on JSFiddle
I have the following split among 3 main div to be side by side. The very left div I want it to take up 60% of the screen and the rest 2 (description and resource) to take each 20%. When I run this all 3 are overlapping on the left portion. Below is my codes.
<div id="left" style="position:absolute;top:0px;left:0px;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="position:absolute;top:0px;left:0px;width:60%;height:400px">Map goes here.</div>
<div id="details" style="position:absolute;top:400px;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="position:absolute;top:0px;width:20%;height:100%;background:#ffffff;">
</div>
They are overlapping because you've given them all absolute position and left 0. Absolute position removes the element from the normal flow of the page and puts it exactly where you indicate using the top/left/right/bottom properties. They will overlap as long as they have the same parent and same position properties.
Absolute position and left being 0 is making them overlap.
Please use css
see solution : http://jsfiddle.net/thecbuilder/vZ77e/
html
<div id="left">
<div id="map">Map goes here.</div>
<div id="details">Details</div>
</div>
<div id="description">description</div>
<div id="resource">resource</div>
css
#left, #description, #resource{
display:inline;
float:left;
height:100%;
}
#left{
width:60%;
background:#e6e6e6;
}
#description, #resource{
width:20%;
}
They are overlapping because you are using position absolute. instead place the divs at the top of the html page and do this instead:
<div id="left" style="float:left;width:60%;height:100%;background:#e6e6e6;">
<div id="map" style="float:left;width:60%;height:400px">Map goes here.</div>
<div id="details" style="float:left;left:0px;width:60%;height:400px">Details</div>
</div>
<div id="description" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
<div id="resource" style="float:left;width:20%;height:100%;background:#ffffff;">
</div>
This will place the divs beside each other
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>
Is it possible to use a fixed width div and an expanding div? Something like:
<div style="float:left; width:200px">
</div>
<div style="float:left; width:100%"> // expand please
</div>
<div style="position:fixed; width:320px">
</div>
I'd like the middle div to just expand in width and take up whatever is left after position the left and right div. It works fine if I give each of them a width in %, but when using a fixed-width for some, they start overlapping when the browser frame gets small etc,
Thanks
How about:
<html>
<body>
<div style="float:left;width:200px;background:red">
</div>
<div style="float:right; width:320px;background:blue">
</div>
<div style="background:black">
</div>
</body>
</html>
<div style="left:0;width:30px;"></div>
<div style="left:30px;right:0;"></div>
You may need to make them absolute positioned and the parent relative.