I cannot understand this.. kindly help
I want the blue and red boxes to align with like colours beneath but there seems to be this gap that always persist (even with gap 0). and it seems impossible to center this entire layout vertically (the entire layout , without 100% height of viewport). Can someone explain why and suggest some possible solutions with explanations? I hope you kindly cooperate since i am still on my learning phase.
51 Replies
@Cole Thank you for sharing the link, it was helpful
would u mind explaining the problem here to me?
(the problem with my code above)
You don't have a height declared.
You can fix if you declare height: 400px
in the body
but I recommend against that. I think it is bad practice to use absolute positioning on the body element
That's why instead I gave those divs a container and gave them classes.
https://jsfiddle.net/c1wfuby2/
But this is your code (with very minor edits) with height declared on line 14
ah thanks bro
appreciate it
was helpful
Use z-index instead of absolute if possible
the problem persists even if i have height declared... (i am talking about the method that i chose) and the elements seem to be positioned without any gap if I dont declare any height at all.. basically allowing the children to take up and dictate the space for themselves)
@MrkaramSingh didnt quite get how z index is related to absolute positoning here...
Do you have the full code? If you check the jsfiddle I linked most recently, that doesn't have that issue.
@Cole is right about bad practice absolute on body.
Create a div container then put all four in that
i rechecked by refeshing the browser...
so the main problem is working with body tag and not working on any wrapper container other than the body?
We don't have access to your code. Plug it in in a code sharing site like jsfiddle.
ok but how do i share?
That's more of a best practice issue. We are recommending alterntaive ways because that is considered bad practice, and since you are new to this, it will be best to use alternative solutions because absolute body will create issues for more complex pages.
ah i see
thank you
You can get the job done with the code like that if this is all you are doing, but this is not the recommended method for this. There are specific layout elements that are better, and you should instead use div and div classes than modifying all that to the body since everything inside has to follow those rules.
Body is what contain everything its bad practice to edit body ... if body is edit then what is behide boday having white background @Cole do u know?
interesting question
thank you for the guidance
heres my code
and its absolutely broken in jsfiddle for some reason
It is? Share screenshot. It looks fine to me!
wait
what
You said its broken.
This is what I see
bro same
but
mine was messed up
bot now looks all right
the browser must have had some problem
allright then this problem is resolved
Okay
one last question
if i increase browser height
then the boxes space out
why is that?
but in shorter heights they remain joined
this is where all the confusion must have stemmed from
You declared them to have 200px height.
So they will have 200px height and the body / container will fill up the space available unless otherwise declared (like telling body to be 400px)
alternatively, you can give these divs the height of 50%
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
OH i see
This I have removed the rule for the body to be 400px and instead told the divs to be 50%
because i gave them static values
not dynamic values that are subject to change
right?
Yeah.
ty ty
You can also keep the body declaration to be 400 and have the divs be 50% and it will keep that like before.
yes it does
But try to wrap them in a div with a container class and give them classes that are the same instead. Because if you add any other divs, they all automatically will apply the same exact rules regardless of where they are structurally
because you declared the rules for the divs to be what they are
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
example with how it looks with more divs nested
yeah it does work that way
thanks
how would you suggest positioning this to the centre of the screen?
let me give you an example
The very first jsfiddle link I sent is how I would do it personally
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
i am aware of the method you demostrated
i am probing with position absolute and margins to center them because i want to undertsand how they work properly ... margins are very cnfusing after all for me
so i am asking for suggestions in this case to further improve my understanding about how these behave
ah I see
i heard it is not recommended to use magic numbers to center elements (bad practise), i used margin auto to center horizontally , but without applyign any magic number i cant postion it to the center vertically....
also the layout squishes with change in page dimensions
how would u suggest centering it vertically (using margins, padding etc )?
I hope I dont come across as confusing
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
See CSS comments I made
And then here:
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I named the divs "child", adjusted the div rules previously to instead be the rules of .child, and wrapped them inside a container and applied the max width of 400 to the container and told it to be flexbox with a wrap, but the body is what is telling it to be centered both vertically and horizontally.
clean and crisp
ty
if i dont declare any dimensions for my container, is it automatically set to width: auto and height: auto?
@Cole