i'm trying to create a header which contains 3 main elements centered on the page. On both sides of the 3 main divs i'd like to add another div which overflows the page by half it's width.
Like so. Both red divs are twice the length as shown, but overflow:hidden cuts them off.
This is easy enough to create but when i try to add the content of the blue diffs suddenly all of them slide down
I don't understand why this happens.
Furthermore when i add some content to the side divs everything falls back into place
So then i thought of just adding a nbsp; to the red divs to keep everything in position. Which worked. however when i try to center the content of the blue diffs vertically by adding a padding-top the red diffs move down for reasons unknown to me
here is my css
div.padded{
padding-top:20px;
}
.header{
width:100%;
border:2px solid black;
white-space:nowrap;
overflow:hidden;
}
.leftExtend{
width:25%;
margin-left:-12.5%;
background-color:red;
display:inline-block;
}
.middle{
width:25%;
background-color:blue;
display:inline-block;
}
.rightExtend{
width:25%;
background-color:red;
display:inline-block;
}
and the html
<div class="header">
<div class="leftExtend">sometext</div>
<div class="middle padded">aaa</div>
<div class="middle padded">bbb</div>
<div class="middle padded">ccc</div>
<div class="rightExtend">sometext</div>
</div>
I created a jsfiddle to demonstrate the problem.
Why does this happen, what am i doing wrong and what would be the correct way to achieve this behavior?
Try add vertical-align: top; to the divs:
.header div {
vertical-align: top;
}
The default is baseline which causes them to appear at the bottom.
JS Fiddle
Related
I divided my page in sections, one of the sections contains a h2-Tag (the title of the section) and a div (that contains a p-Tag).
I want the text to be perfectly centered inside the section, because of that, I've used flex to center the element.
Now I need the title to be aligned on the left side (see image for better explanation).
https://ibb.co/b5DSpT
If I add it to the div affected by the flex-property the styling is completely wrong. If I remove it from the div, the text isn't perfectly centered anymore, because the h2-tag occupies a small amount of the section.
Any ideas how to solve this problem?
Thanks,
Mike
You don't need to use flex. Check the code below.
.wrapper{
padding:25px;
background:#d0e1d9;
}
.title{
color:#000;
font-size:20px;
margin:0 0 25px 0;
}
.section{
padding:50px 25px;
text-align:center;
font-weight:bold;
font-size:20px;
background:#e5e5e5;
}
<div class="wrapper">
<div class="title">Uber uns</div>
<div class="section">This is the Div with the Text</div>
</div>
This might be really simple but I just cant wrap my head around it.
CSS
#nav_bar{
max-width:1000px;
height:41px;
margin: 0 auto;
background-color:yellow;
}
#left{
float:left;
min-width:200px;
height:41px;
background-color:red;
}
#right{
float:right;
min-width:500px;
height:41px;
background-color:black;
}
HTML
<div id="nav_bar">
<div id="left">
</div>
<div id="right">
</div>
</div>
I'll explain this in colors. Basically I want the red box to float left and the right box to float right inside the yellow box. HOWEVER when I make the browser window smaller everything collapses and the black box goes UNDER the red (outside the yellow). I know this sounds very basic but I don't want it too collapse, I would be happy if it could just stay intact without moving at all and the browser just scrolls horizontally like it normally would if the window becomes too small for the content.
Thanks :)
You need to give #nav_bar a minimum width large enough to accomodate the two child elements:
#nav_bar{
...
min-width: 700px;
}
DEMO
Just add width:1000px or how much you need it to be, on the container. In this case "nav_bar".
Link to JSFiddle
#nav_bar{
max-width:1000px;
width:1000px;
height:41px;
margin: 0 auto;
background-color:yellow;
}
I have few <div>s having display:inline-block, inside an absolute positioned parent <div>.
HTML
<div id='wrap'>
<div id='container'>
<div class='box'></div>
<div class='box'></div>
<div class='box'>#</div>
<div class='box'></div>
</div>
</div>
CSS
*{
margin:0;
}
html, body{
height:100%;
}
#wrap{
position:relative;
background:lightgreen;
height:100%;
}
#container{
position:absolute;
bottom:0px;
vertical-align:baseline;
}
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
}
When I add some ascii character codes in any of the <div>s, strangely other <div>s move up. if I remove the ascii character then all <div>s align perfectly in the same row.
check this JSFiddle
I am aware of other ways for making this layout, I can make the boxes absolute and force them to be positioned at the bottom of the parent, I'm aware of css3 flex.
But I'm interested in this specific problem, can somebody explain why is this happening..? or how can I fix it as it is?
Update
I am not interested in fixing it, since there are many ways to achieve the same alignment. I just want to understand what's happening. The question is, the divs are being being aligned at the bottom by default. Why does the other divs suddenly aligns at the top when one of the divs have character inside it?
Updated Fiddle with both scenarios
side note: this only happens when I add text inside the elements, if I add an HTML element instead of a character all divs still aligns at the bottom.
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
vertical-align: top;
}
add vertical-align: top;
when
I have page that loads data in dynamically. I have put the image on the left and some text on the right. In two column by using float:left;
This works fine but the height of the containing div does not change to match the height of the larger div.
I have soemthing like this:
<div class="container">
<div class="left">//some php to load image</div>
<div class="right">//loaded text</div>
</div>
.container{
width:800px;
height:auto;
}
.left,.right{
float:left;
height:auto;
}
.left{
width:300px;
}
.right{
width:500px;
}
The divs are next to eachother but the containing div only resizes to the height of the smallest div. Shouldn't it resize to the height of the largest div?
Add overflow:auto to the .container element..
I think this is a typical clearfix problem.
Read here about clearfix: What is a clearfix?
Does anyone know why the float:left isn't working? Basically, I have a div with class=boxscore_first, which is in the correct position. Then I have two more divs with class=boxscore which are appearing on top of the first. I want them to appear in sequence to the right of the first one. I want them to all float next to each other..
HTML
<div id="menu">
<div id="scoreboard"></div>
<div class="boxscore_first"></div>
<div class="boxscore"></div>
<div class="boxscore"></div>
</div>
CSS
.boxscore_first {
width:60px;
height:60px;
background-color:red;
margin-top:-60px;
margin-left:13px;
float:left;
}
.boxscore {
width:60px;
height:60px;
background-color:blue;
float:left;
margin-top:-60px;
margin-left:13px;
}
Actually, according to HTML you provided, you have three boxes. Left one and right one are .boxscore_first and the middle one is .boxscore.
Another and more relevant thing is that the .boxscore_first is a div. That means it's a block element. It doesn't float. In other words it wants to be alone in the line. You have to make both .boxscore_first and .boxscore float: left.