Horizontal balancing black box which is divided 3 boxes

HTML & CSS
1

I have a page at http://form.kr/q/flex3/03/.
On the top, there is a black box which is divided by 3 which are topLeft, topCenter, and topRight.
On the bottom, there is a black box which is divided by 3 boxes which are fixLeft, fixCenter, and fixRight.

On the top, I used float:left and float:right.
On the bottom, I used flex which is divided by 3.

On the top, there is some default margin in the left and in the right.
On the bottom, there is some margin on the left and no margin on the right.
The left margin on the fixLeft seems bigger than the topLeft margin.

So,
the horizontal position of fixLeft is a little more rightward than topLeft.
And the horizontal position of fixCenter is much more rightward than topCenter.
And the horizontal position of fixRight is also rightward than topRight.
And some part of the text “fixRight” is even hidden by the browser.
And there is no marging on the right of the fixRight.

I like to make fixLeft, fixCenter, and fixRight are same horizontal position with topLeft, topCenter, and topRight.

I like to control the left margin and the right margin of the black box on the bottom for making it same as the black box on the top.

2

That’s the UA default styles for the body and may vary by browser so you should not rely on them. If you want an explicit margin on the body element then set it yourself.


body{margin:8px;padding:0;}

The fixed element on the bottom bottom is 100% wide and has 5px margins and 5px padding making 100% + 20px wide. How will that ever fit into a space that is 16px less than 100%?

Remove the horizontal margins and place the element 8px from the left and right and remove the width.


#flex3Wrap { 
background:black;
color:white;
position:fixed;
border-radius:5px;
bottom:0px;
margin:5px 0;
padding:5px;
left:8px;
right:8px;
z-index:1;
}
1 Like
3

Thank you, it works fine at http://form.kr/q/flex3/04, very much.

By the way,
I added the following for making “fixLeft”, “fixCenter”, and “fixRight” be positioned vertically middle.

but it seems not to work.
How can I make the 3 white text on the bottom be positioned of the black box vertically middle instead of vertically top?

5

Hi there joon1,

try changing this…

#flex3 {
    display:flex;
    text-align:center;
    vertical-align:middle;
}  

#flex3 > a {
    flex:1 0 33%;  
    width:33%;
    height:50px;
    padding:5px; 
}

…to this…

#flex3 {
    display: flex;
} 

#flex3 > a {
    flex: 1 0 33%;
    padding: 1em 0.5em; /* adjust values to suit */
    box-sizing: border-box;
}

coothead

2 Likes
6

It is vertically middle at http://form.kr/q/flex3/05/ with your code.
Thank you very much.
so far so good.

When I look at the page closely, I found a problem like the following.

I like to make it like the following.

7

Hi there joon1,

in your CSS file I see this…

#flex3 > a {
    flex: 1 0 33%;
    width: 33%;
    padding: 1em 0.5em;
    box-sizing:
}

It should, of course, be…

#flex3 > a {
    flex: 1 0 33%;
    width: 33%;
    padding: 1em 0.5em;
    box-sizing: border-box;
}

coothead

1 Like
8

Thank you, it was my careless, very much

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.